Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

javascript table handling

Posted on 2014-08-22
5
Medium Priority
?
227 Views
Last Modified: 2014-09-25
I have two tables on a html page, the original table will be filled by a DB2 results but on each row of this table I need to add a Add button which will add that row into a new table, and in this new table, I need to add two new check boxes and a Remove button, which when clicked need to remove the row from this table and add this to the source table back ....

Can any one post the HTML and the JS ...
0
Comment
Question by:raviraghu
  • 2
3 Comments
 
LVL 34

Expert Comment

by:Big Monty
ID: 40279359
if you're able to use jquery, there are tons of table components out there such as datatables and jqGrid
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 40279361
datatables is the more "popular" one, although I find it a bit difficult to set up. jqGrid I think is much easier to implement and has the same features of most of the components out there
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 40280011
http://jsbin.com/tisohu/1/edit

This is where knockoutjs is so good in that you can capture that logic you're trying to achieve and control it in code rather than messy html:

$(function() {
	viewModel = {
		sourceTable: ko.observableArray([
			'row1','row2','row3','row4'
		]),
		destTable: ko.observableArray([])

	};

	viewModel.addRow = function(r) {
		viewModel.sourceTable.remove(r);
		viewModel.destTable.push(r);
	};
	
	viewModel.removeRow = function(r) {
		viewModel.sourceTable.push(r);
		viewModel.destTable.remove(r);
	};

	ko.applyBindings(viewModel);
});

Open in new window


		<table border="1">
			<thead>
				<tr>
					<td>Table 1</td>
				</tr>
			</thead>
			<tbody data-bind="foreach: sourceTable">
				<tr>
					<td data-bind="text: $data"></td>
					<td><button data-bind="click: $root.addRow">Add</button></td>
				</tr>
			</tbody>
		</table>
		<p></p>
		<table border="1">
			<thead>
				<tr><td>Table 2</td></tr>
			</thead>
			<tbody data-bind="foreach: destTable">
				<tr>
					<td data-bind="text: $data"></td>
					<td><input type="checkbox" name="checkbox1" value="yes" /><input type="checkbox" name="checkbox1" value="no"/></td>
					<td><button data-bind="click: $root.removeRow">Remove</button></td>
				</tr>
			</tbody>
		</table>

Open in new window

0

Featured Post

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

581 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