Click items from one table to another
HTML
<div id="fromdiv" class="search" >
<table>
<thead><tr><th>close</th></tr></thead>
<tbody></tbody>
</table>
</div>
<div class="search" id="todiv" >
<table><tbody></tbody></table>
</div>
CSS
div.search {
position:absolute;
/*display:none;*/
top:148px;
height:300px;
width:300px;
background-color:#CCC;
/* add your .search definition here */
}
.search#fromdiv {
left:146px;
}
.search#todiv {
left:546px;
}
.search table {
width:100%;
}
.search thead th {
text-align:right;
cursor:pointer;
/* add your .line definition here */
}
.search tbody tr {
cursor:pointer;
/* add your .headerlist definition here */
}
span { /* demo notification */
position:absolute;
color: Red;
background-color: Yellow;
font-weight:bold;
left:200px;
}
JavaScript
//"from" data; as a JSON-like databasey-type of object
var contents = [
{ "data-id": 66, text: "other" },
{ "data-id": 67, text: "place" },
{ "data-id": 68, text: "Profession : Doctor" }
];
$(document).ready(function () {
//cache key selections for performance
var $tfrom = $("div#fromdiv tbody");
var $tto = $("div#todiv tbody");
//populate "from" table using contents data array
$.each(contents, function (i, props) {
$("<tr>").append($("<td>", props)).appendTo($tfrom);
});
//detect a click on divfrom row; clone item and add to divto
$tfrom.on("click", "tr", function () {
$(this).clone().appendTo($tto);
var $cell = $("td", this);
var data = { id: $cell.data("id"), text: $cell.text() };
$(this).remove();
saveToDatabase(data);
savedToDatabase(data);
});
//function to save to database (assume AJAX JSON interface)
function saveToDatabase(data) {
$.post("myDatabaseSaver.php", data);
}
//demo-only function to illustrate saving to database
function savedToDatabase(data) {
var $notice = $("<span>").text("[" + data.id + "]" + data.text + "... saved to database").hide().appendTo("body");
$notice.fadeIn("slow").delay(3000).fadeOut("slow", function() { $(this).remove(); });
}
});