I have a table on the say on the left side and it has four columns. I have another table on the right and I want two columns from the first column to be displayed on the right column. All I am able to achieve is adding whole new row, where as I want columns formatted in row. I know I have to append html using jquery but can't find a way.
html code below for left table:
<table class="table table-hover" id="tbl1">
<thead>
<tr>
<th>Items</th>
<th>Quantity/Calories</th>
<th>Portion</th>
<th>Approx. Callories</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td><input type="checkbox" class="chkclass"><span> Apple</span></td>
<td>1 medium/65cal</td>
<td><input type="text" ng-model="qty"> Nos. </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
<tr data-index="1">
<td><input type="checkbox" class="chkclass"><span> Banana</span></td>
<td>1 medium/90cal</td>
<td><input type="text"> Nos. </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr data-index="1">
<tr>
<td><input type="checkbox" class="chkclass"><span> Grapes</span></td>
<td>30Nos./70cal</td>
<td><input type="text" ng-model="qty"> g </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
<tr>
<td><input type="checkbox" class="chkclass"><span> Guava</span></td>
<td>1 medium/50cal</td>
<td><input type="text"> g </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
<tr>
<td><input type="checkbox" class="chkclass"><span> Jackfruit</span></td>
<td>4 pieces/90cal</td>
<td><input type="text"> Nos. </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
<tr>
<td><input type="checkbox"><span> Mango</span></td>
<td>1 medium/180cal</td>
<td><input type="text"> Nos. </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
<tr>
<td><input type="checkbox"><span> Mosambi/orange</span></td>
<td>1 medium/40cal</td>
<td><input type="text"> Nos. </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
<tr>
<td><input type="checkbox"><span> Papaya</span></td>
<td>1 piece/80cal</td>
<td><input type="text"> Nos. </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
<tr>
<td><input type="checkbox"><span> Pineapple</span></td>
<td>1 piece/50cal</td>
<td><input type="text"> Nos. </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
<tr>
<td><input type="checkbox"><span> Sapota</span></td>
<td>1 medium/80cal</td>
<td><input type="text"> Nos. </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
<tr>
<td><input type="checkbox"><span> Watermelon/muskmelon</span></td>
<td>1 slice/15cal</td>
<td><input type="text"> Nos. </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
<tr>
<td><input type="checkbox"><span> Custard apple</span></td>
<td>1 medium/130cal</td>
<td><input type="text"> Nos. </td>
<td><input type="text" class="uneditable-input" placeholder="aa"> cal.</td>
</tr>
</tbody>
html code for right table:
<table class="table rt-table rt-table-border" id="tbl2">
<thead style="background-color: #dff0d8">
<tr>
<th style="line-height: 11px !important;">Name</th>
<th style="line-height: 11px !important;">Portion</th>
<th style="line-height: 11px !important;">Calorie</th>
</tr>
</thead>
<tbody id="">
</tbody>
</table>
and the script
$(window).load(function(){
$("#tbl1 input:checkbox.chkclass").click(function(){
//var fs=$(this).parent('div')
// var span = $('span [for="'+this.id+'"]',fs)
if ($(this).is(":checked"))
{
$(this).closest("tr").clone().appendTo("#tbl2");
/*
$('#tbl2').append('<tr data-for="'
+span.text()
+'"><td>'
+span.text()
+'</td><td>'
+$(this).attr('value')
+'</td></tr>');
*/
}
else
{
var index = $(this).closest("tr").attr("data-index");
var findRow = $("#tbl2 tr[data-index='" + index + "']");
findRow.remove();
}
});
});
The commented code gives me undefined and un-commented code give the whole row.
I know the question is long, needed to give a descriptive idea.
I have created a jsfiddle for you hope it works for you. click here
you can use the following code:
$("#tbl1 input:checkbox.chkclass").click(function(){
var html = '';
if ($(this).is(":checked")) {
$(this).next().clone().appendTo("#tbl2");
$(this).parent().next().next().clone().appendTo("#tbl2");
$(this).parent().next().next().next().clone().appendTo("#tbl2");
} else {
var index = $(this).closest("tr").attr("data-index");
var findRow = $("#tbl2 tr[data-index='" + index + "']");
findRow.remove();
}
});
Note: There are other alternates too.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments