Solved

Spit table

Posted on 2014-01-17
6
196 Views
Last Modified: 2014-02-04
Im trying to create a function to split a table into two and put some content inbetween them, so I can display some more information.

So what Ive done is:-
$(document).ready(function () {
    $("#newTable").click(function () {
        // clone table one to create table two
        var $tableOne = $('table').attr('id', 'newTable1');
        var $tableTwo = $tableOne.clone().attr('id', 'newTable2');

        var $split = $(this).index()+1;

        // remove any rows after the split-nth index - 1 from tableOne
        $tableOne.find('tr:gt(' + $split - 1 + ')').remove();
        $tableTwo.find('tr:lt(' + $split - 1 + ')').remove();

        var $newHTML = $tableOne + "<strong>Hello</strong>" + $tableTwo;
        
        $('#newTable').replaceWith($newHTML);

    });
});

Open in new window


I'm getting NaN error but it doesn't say which line its on, and doesn't split the table.

Ive put it onto jsFiddle can someone please have a look and advise what Im doing wrong please?

Thank you
0
Comment
Question by:tonelm54
6 Comments
 
LVL 142

Expert Comment

by:Guy Hengel [angelIII / a3]
ID: 39788696
this is presumably the issue:
' string '  + number - number + 'string' 

Open in new window

as you are mixing data types here ...

I would suggest this code:
$(document).ready(function () {
    $("#newTable").click(function () {
        // clone table one to create table two
        var $tableOne = $('table').attr('id', 'newTable1');
        var $tableTwo = $tableOne.clone().attr('id', 'newTable2');

        var $split =  $(this).index().toString();

        // remove any rows after the split-nth index - 1 from tableOne
        $tableOne.find('tr:gt(' + $split + ')').remove();
        $tableTwo.find('tr:lt(' + $split  + ')').remove();

        var $newHTML = $tableOne + "<strong>Hello</strong>" + $tableTwo;
        
        $('#newTable').replaceWith($newHTML);

    });
}); 

Open in new window

0
 
LVL 12

Expert Comment

by:mkishline
ID: 39788774
Guy Hengel is right in that the error you are receiving comes from the "-" on lines 10 and 11 of your code. There were a few issues after the error was resolved that I've corrected below:

$(document).ready(function () {
	$("#newTable").click(function () {
		// clone table one to create table two
		var $tableOne = $(this).clone().attr('id', 'newTable1');
		var $tableTwo = $tableOne.clone().attr('id', 'newTable2');

		var $split = $(this).index()+1;

		// remove any rows after the split-nth index - 1 from tableOne
		$tableOne.find('tr:gt(' + $split + ')').remove();
		$tableTwo.find('tr:lt(' + ($split + 1) + ')').remove();

		var $newHTML = $('<table>').append($tableOne).html() + "<strong>Hello</strong>" + $('<table>').append($tableTwo).html();
		
		$('#newTable').replaceWith($newHTML);

	});
});

Open in new window


Hope this helps.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39788843
I'm not sure if you are wanting to split from the row after where you click or on the row you click - this seperates the rows after where you click

http://jsfiddle.net/GaryC123/sNQTF/3/

$(document).ready(function () {
	$("#newTable tr").click(function () {
		// clone table one to create table two
		var $tableTwo = $("#newTable").clone().attr('id', 'newTable2');
		var $split = $(this).index()+1;

		// remove any rows after the split-nth index - 1 from tableOne
		$("#newTable").find('tr:gt(' + ($split-1) + ')').remove();
		$tableTwo.find('tr:lt(' + ($split ) + ')').remove();

		var $newHTML = "<strong>Hello</strong>" + $('<table>').append($tableTwo).html();
		
		$($newHTML).insertAfter($("#newTable"));
	});
}); 

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39790339
Another approach
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('#table1 tr').click(function() {
    var rows = $('#table1 tr');
    var table2 = $('<table />');
    for(var i = $(this).index(); i < rows.length; i++) {
      table2.append($('#table1 tr:eq(' + i + ')').remove());
    }
    $('#table1').after(table2).after($('<strong/>').html('Hello World'));
  });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<table id="table1">
  <tr>
    <td>Row 1 column 1</td><td>Row 1 column 2</td>
  </tr>
  <tr>
    <td>Row 2 column 1</td><td>Row 2 column 2</td>
  </tr>
  <tr>
    <td>Row 3 column 1</td><td>Row 3 column 2</td>
  </tr>
  <tr>
    <td>Row 4 column 1</td><td>Row 4 column 2</td>
  </tr>
  <tr>
    <td>Row 5 column 1</td><td>Row 5 column 2</td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39790717
Your row splitting Julian is a bit screwy.
0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39791115
You are right (thanks Gary) - hows this
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('#table1 tr').click(function() {
    var rows = $('#table1 tr');
    var table2 = $('<table />');
	var idx = $(this).index();

    for(var i = rows.length-1; i >= idx; i--) {
      table2.prepend($('#table1 tr:eq(' + i + ')').remove());
    }
    $('#table1').after(table2).after($('<strong/>').html('Hello World'));
  });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<table id="table1">
  <tr>
    <td>Row 1 column 1</td><td>Row 1 column 2</td>
  </tr>
  <tr>
    <td>Row 2 column 1</td><td>Row 2 column 2</td>
  </tr>
  <tr>
    <td>Row 3 column 1</td><td>Row 3 column 2</td>
  </tr>
  <tr>
    <td>Row 4 column 1</td><td>Row 4 column 2</td>
  </tr>
  <tr>
    <td>Row 5 column 1</td><td>Row 5 column 2</td>
  </tr>
</table>
</body>
</html>

Open in new window

0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
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)

831 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