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
Solved

Spit table

Posted on 2014-01-17
6
202 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 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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
LVL 55

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 55

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
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…
The viewer will learn how to dynamically set the form action using jQuery.
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…

839 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