2 Replies - 923 Views - Last Post: 30 August 2012 - 07:14 AM

#1 wama_mms  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 54
  • Joined: 06-May 12

question about how to add row from table to another with checkbox

Posted 30 August 2012 - 04:48 AM

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
Is This A Good Question/Topic? 0
  • +

Replies To: question about how to add row from table to another with checkbox

#2 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 106
  • 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  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 106
  • Joined: 31-July 12

Re: question about how to add row from table to another with checkbox

Posted 30 August 2012 - 07:14 AM

View PostStefanOnRails, 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 :sweatdrop:). 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" :D . 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