Solved

Spit table

Posted on 2014-01-17
6
207 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
[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
6 Comments
 
LVL 143

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
Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

 
LVL 57

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 57

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…

707 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