Hvis jeg forstår dig rigtigt, mener du, at du ville vælge et element fra listen over elementer i tabel A, og det skulle vises i tabel B. Bagefter ønskede du at klikke på send-knappen i tabel B for at gemme de valgte elementer fra tabel A?
Her er løsningen:
Navngiv venligst denne fil som test.php
<?php
/**
* Created by PhpStorm.
* User: SQ05
* Date: 06/01/2017
* Time: 06:31 PM
*/
//Note that data is a typical example of data u gotten from DB. so make sure u push all $row into an array
//such that u create something of this nature eg
// $data=array();
// $i=0;
//while($row=mysql_fetch_assoc($query)){
//$data[$i]=$row;
//$i++;
//}
// this will then create data of this nature below,
$data=array(
array('id'=>1,'name'=>'Loveth','age'=>23,'phone'=>'9889087455'),
array('id'=>2,'name'=>'Susan','age'=>51,'phone'=>'787987455'),
array('id'=>3,'name'=>'Precious','age'=>13,'phone'=>'98989087455'),
array('id'=>4,'name'=>'Hannah','age'=>21,'phone'=>'987087455'),
array('id'=>5,'name'=>'Kenneth','age'=>43,'phone'=>'569087455'),
);
?>
<div style="float:left;width:50%">
THE LIST OF ALL ITEMS
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>Phone</td>
<td>Action</td>
</tr>
<?php
$i=0;
for ($i=0;$i<count($data);$i++) {
$item=$data[$i];
?>
<tr>
<td><?php echo $item['name'];?></td>
<td><?php echo $item['age'];?></td>
<td><?php echo $item['phone'];?></td>
<td><button onclick='addToList(<?php echo json_encode($item);?>);'>Add</button></td>
</tr>
<?php
}
?>
</table>
</div>
<div style="float:left; width:50%">
THE ITEM TO BE SAVED
<div id="showToSave"></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script> <!--Please install jquery base on ur own directory path-->
<script>
var listToSave=[]; // must be global
/**
* The add to list function that process data and add to list
* @param data
*/
var addToList= function(data){
var lenData=listToSave.length;
if(lenData>0){
//this is used to avoid duplicate
for(var j=0;j<lenData;j++){
if(data.id==listToSave[j].id) return;
}
}
listToSave.push(data);
console.log(listToSave);
document.getElementById('showToSave').innerHTML=createData(listToSave);
};
var createData= function (data) {
var len=data.length;
var tableToSave="<table><tr><td>Name</td> <td>Age</td> <td>Phone</td> <td>Action</td></tr>";
var i;
for(i=0;i<len;i++){
content=data[i];
tableToSave+="<tr><td>"+content.name+"</td><td>"+content.age+"</td><td>"+content.phone+"</td><td>" +
"<button onclick='deleteFromSave("+i+")'>Delete</button></td></tr>";
}
tableToSave+="</table><div><button onclick='saveData()' type='button'>Save</button></div>";
return tableToSave;
};
/**
* This is use to delete data added locally
*/
var deleteFromSave=function (index) {
listToSave.splice(index,1); //this is use to delete from list to save
document.getElementById('showToSave').innerHTML=createData(listToSave); //to rerender after delete
};
/**
* This is use to submit data
*/
var saveData=function () {
console.log('thjis=',listToSave);
$.ajax({
type: "POST",
url: "getData.php",
data: {list : JSON.stringify(listToSave)},
success: function(resp){
console.log('response=',resp);
}
});
};
</script>
Navngiv dette som getData.php at behandle indsendelsen af listen over tilføjede data ved hjælp af metoden med multiple value insertion.
<?php
/**
* Created by PhpStorm.
* User: SQ05
* Date: 06/01/2017
* Time: 07:28 PM
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$data = json_decode(stripslashes($_POST['list'])); //the data here can now be used to create a multiple value insert to ur mysql db.
print_r(json_encode($data)); // this is used to send response back to ur page if using array buh echo if string
}