I have 2 html tables. In the first table I will be able to select the values required and click on an add button which fetches the records in the first table and appends it in the second table. I also have a td in first table which consists of combo box on selecting the value in the combo box and clicking on the add button I will be able to append the record to the second table according to the values in combo means adding the record that many times.
I'm now having a doubt that:
I have a text box in the second table which consists of the numeric value, and when I selected the record from the first table and add, the row gets dynamically appended to the second table and a textbox is added. Apart from this I have a text box outside these tables. the values of the textbox in the second tables should be added and the total should be displayed in the textbox which doesnot belongs to these html tables.
The php code sample along with jquery is as follows:
php code
<div>
<label>Todays date</label>
<input type=text name=tdate id=tdate>// used a datepicker for this
<input type=button class=addBtn>
<table border=1 id=tbl>
<tr>
<th>sno</th>
<th>name</th>
<th>date</th>
<th>insertion</th>
<th>Amount</th>
</tr>
<tr>
<td id=num>1</td>
<td id=name>abc</th>
<td id=date>08-10-2012</td>
<td><select id=insertion name=insertion>
<?php for($i=1;$i<=10;$i++) { echo "<option value=$i>$i</option>; }?>
</select>
</td>
<td id=amount>10000</td>
</tr>
<tr>
<td id=num>2</td>
<td id=name>def</th>
<td id=date>23-10-2013</td>
<td>
<select id=insertion name=insertion>
<?php for($i=1;$i<=10;$i++) { echo "<option value=$i>$i</option>; }?>
</select>
</td>
<td id=amount>10000</td>
</tr>
</table>
// the above table data is bought from database using onchange event of combobox and lots of data but
//not showing as of now.
<table border = 1 id = clone>
<tr>
<th>sno</th>
<th>name</th>
<th>date</th>
<th>insertion</th>
<th>Amount</th>
<th>today date</th>
<tr>
</table>
<label>totAmount</label>
<input type = text name= totAmount id=totAmount>
</div>
functions.js
$('#tbl').on('click', 'tbody tr', function(event) {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).css("background", "white");
} else {
$(this).addClass('selected');
$(this).css("background", "#ffc");
}
});
var k=1;
$(".addBtn").on('click', function(event) {
if ($('#tbl tr').hasClass('selected')) {
var items = [];
$('#tbl tr.selected').each(function() {
var name= $(this).find("#name").html();
var date = $(this).find("#date").html();
var insertion = $(this).find("#insertion option:selected").html();
var amount = $(this).find("#amount").html();
var todaydate = document.getElementById("tdate").value;
for(var j=1; j<=insertion;j++) {
var n = "<tr>"+"<td>"+k+"</td>"+"<td>"+name+"</td>"+
"<td>"+date+"</td>"+"<td>"+j+"</td>"+
"<td>"+amount+"</td>"+"<td>"+todaydate+"</td>"+
"</tr>";
items.push(n);
$("#clone").append(n);
k++;
}
});
}
$("#tbl tr").removeClass('selected');
$("#tbl tr").css('background','white');
});
// I have the textbox totAmount.
//I want the the amount present in the clone table to be added to the amount in the totAmount and also
// when I click the add button, after selecting the tr from the table (tbl), the tr is being appended
//but the amount could not be added to the textbox totAmount.
and I wanted to know that is it the best way to copy data from table and append it to another table.
If not please let me know any other possible way of copying data from one table to other table with an example Please.
Thanks
Please help.