asked on

Spit table

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

Guy Hengel [angelIII / a3]

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

mkishline

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.

Gary

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

Julian Hansen

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

Gary

Your row splitting Julian is a bit screwy.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial