?
Solved

Jquery: Append selected data from one table into another

Posted on 2013-06-05
3
Medium Priority
?
472 Views
Last Modified: 2013-06-06
Hi Experts,

I have attached some code below. I am looking to toggle add/remove selected rows from one table to another when the checkbox in a row has been selected.

So when a user checks an input in tableA it adds the row to tableB with only the correct columns added (as you will see there are less columns in tableB)

I also need it to remove these rows from tableB when user unchecks the input in tableA

(Not removing any rows from tableA)

Many thanks for any assistance offered

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tableA">
  <tr>
    <th scope="col">Select</th>
    <th scope="col">Name</th>
    <th scope="col">Birth Year</th>
    <th scope="col">Birth Month</th>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Alex</td>
    <td>1980</td>
    <td>October</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Mike</td>
    <td>1976</td>
    <td>December</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Robert</td>
    <td>1954</td>
    <td>May</td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tableA">
  <tr>
    <th scope="col">Select</th>
    <th scope="col">Name</th>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>%Name%</td>
  </tr>
</table>
</body>
</html>

Open in new window

0
Comment
Question by:maccaj51
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 39223485
Something like this ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('#tableA :checkbox').click(function() {
		if ($(this).is(':checked')) addRow($(this).closest('tr'));
		else $('#' + $(this).closest('tr').attr('id') + '_sub').remove();
	});
	$('#tableB tbody').on('click', ':checkbox', function() {
		if ($(this).not(':checked')) $(this).closest('tr').remove();
	});
});
function addRow(obj)
{
	var row = $('<tr/>').attr('id', obj.attr('id') + '_sub');
	row.append($('<td/>'));
	row.append($('<td/>').html(obj.children().eq(1).html()));
	$('#tableB').append(row);
}
</script>
</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tableA">
  <tr>
    <th scope="col">Select</th>
    <th scope="col">Name</th>
    <th scope="col">Birth Year</th>
    <th scope="col">Birth Month</th>
  </tr>
  <tr id="row1">
    <td><input type="checkbox" /></td>
    <td>Alex</td>
    <td>1980</td>
    <td>October</td>
  </tr>
  <tr id="row2">
    <td><input type="checkbox" /></td>
    <td>Mike</td>
    <td>1976</td>
    <td>December</td>
  </tr>
  <tr id="row3">
    <td><input type="checkbox" /></td>
    <td>Robert</td>
    <td>1954</td>
    <td>May</td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tableB">
  <tr>
    <th scope="col">Select</th>
    <th scope="col">Name</th>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>%Name%</td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:maccaj51
ID: 39223912
Brilliant!!! Many many thanks!!!
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 39224754
You are welcome - thanks for the points.
0

Featured Post

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question