New Topic/Question
Reply
I am just a beginner in the javascript and I want to know how to add row from table to another table when the user click on a checkbox the row goes from the original table to the other table and deleted from the original one.
thanks in advance
2 Replies - 418 Views - Last Post: 30 August 2012 - 07:14 AM
MultiQuoteReplies To: question about how to add row from table to another with checkbox
#2
StefanOnRails
- D.I.C Head
Reputation: 35
- Posts: 105
- Joined: 31-July 12
Re: question about how to add row from table to another with checkbox
Posted 30 August 2012 - 06:03 AM
Here's a tutorial on how to add / remove rows inside a table via Javascript. With a little work you can adapt it to match your example. 
Was This Post Helpful?
0
#3
StefanOnRails
- D.I.C Head
Reputation: 35
- Posts: 105
- Joined: 31-July 12
Re: question about how to add row from table to another with checkbox
Posted 30 August 2012 - 07:14 AM
StefanOnRails, on 30 August 2012 - 03:03 PM, said:
Here's a tutorial on how to add / remove rows inside a table via Javascript. With a little work you can adapt it to match your example.
UPDATE: Hi, I took a better look at the link I just submited to you and I found out that it wasn't really what you needed (my fault
). You need to find a way to grab all the data inside a specific row and then transfer it to the second table. I didn't manage to find another tutorial so I wrote a function myself. Hope this time I got it right Firstly, I'll supose this is how your HTML looks:
<table id="table_1">
<tr id="row_1">
<td><input type="checkbox" value="row_1" onchange="send_from(this.value)" /></td>
<td>ID 1</td>
<td>Name: 1</td>
</tr>
...
</table>
<table id="table_2">
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
</tr>
</table>
As you see I added a function which is fired every time the checkbox is, well, "checked" 
. Now here's the function I told you about:
var source = document.getElementById('table_1');
var dest = document.getElementById('table_2');
function send_from(id){
var tr = document.getElementById(id); // get the tr
var rowHTML = tr.innerHTML; // get tr's HTML
var data = rowHTML.substr(rowHTML.indexOf('</td>') + 5); // get rid of the checkbox
var new_data = '<tr>' + data + '</tr>'; // form new tr
dest.innerHTML += new_data; // append it to dest table
source.deleteRow(tr.rowIndex); // remove source's row
}
Important: the script must be placed inside the <body> and after those 2 tables, so that source and dest can be properly initialized.OK, this is your "tutorial". Consider it a gift since a I wanted to repair my previous mistake.
Was This Post Helpful?
0
Page 1 of 1
|
|
| 