Develop Reference

Add div to table after each row

I have this table: https://codepen.io/anon/pen/bjvwOx
Each time I click a row (e.g 1st row 'NODE ID 1'), the div with the id #divTemplate should appear below the row as you can see in the demo link.
The problems are (I know of) :
The div displays all the contents from endpointsData object(e.g if I click on the first row,
the div should contain 'EPID: 1', not 'EPID: 1234' as you can see in demo).
The 'accordion' display of the div works chaotic. In demo you can see if you press
multiple times on a row, the div just appears in different places, till it doesn't work any more
For the 1st problem I did this: https://codepen.io/anon/pen/Owvbae (I selected each id from div)
$("#epid").text(roomValue[key[0]]);
$("#clslist").text(roomValue[key[1]]);
$("#type").text(roomValue[key[2]]);
$("#zplus").text(roomValue[key[3]]);
Is there a way I can loop this?
Any ideas for the second problem?

To fix the 'accordion' you should put it in your <tr class="header">, then use jquery and listen when pressed on it.
$('.header').on('click' function() {
// code
});
After that use $('this') to get what has been pressed, and target it's children row .children([selector]) to manipulate the acordion.

Insert Row(child) in table using JavaScript

I have table containing 4 main rows and one (expand or collapse) button.On click of (expand or collapse) button i want to insert one more row in middle of all rows(which result in total 8 rows) by iterating the table rows.How to do this using Javascript?See the image below.Any suggestion.
This is the code i have return on click of Expand or Collapse button,
jQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i) {
//what code need to add here
});
});

Due to the fact, that you haven't provided a code example, I only can suggest one way to achieve this.
You can determine the row above the row you'll want to insert by an id on the tr or by a css selector like :nth-of-type(4) for example.
After that, you can use this row as jquery element (example: $("tr#yourrow")) and append a row after it using append().
Example: $("tr#yourrow").append("<tr>... your row definition ...</tr>")
Based on the updated question:
jQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr>... your row definition ...</tr>")
});
});
The row definition should be done by yourself. I don't know the logic behind the iteration in your case. But I think you'll get it. :)

Hide div if no table rows are visible

I have a few divs on a page each containing one table.
A user interacts with the table and hides some rows.
I want to hide the containing div if all the table rows in the containing table are hidden.
How can I do this in jQuery?
.div.mytable
table
tr
.div.mytable
table
tr

Demo
This hides the row you want to hide and hides it's parent div if all rows are hidden.
JS
$('.hide').click(function(){
// This hides the nearest <tr>
$(this).closest('tr').hide();
// Number of <tr> of it's <table>
var tableTrNumber = $(this).closest('table').find('tr').length;
// Number of <tr> already hidden of it's <table>
var tableTrHiddenNumber = $(this).closest('table').find('tr:hidden').length;
// If my tr number are equal to the number of hidden tr then hide the div
if(tableTrNumber == tableTrHiddenNumber)
{
$(this).closest('.mytable').hide();
}
});
Every style and HTML structure is just to show you how it works. Feel free to adapt it to your needs. Of course you've to respect the hierarchy of elements.
If you don't like the hide() function you can put whatever effect you want like a fade or accordion.
Hope this helps you.

You can target the containing div or put a class on each of the containing divs
<div class="containerDiv">
<table>
</table>
</div>
Use the simple jQuery .has() method
if($(".containerDiv table").has("tr")){
$(this).parent(".containerDiv").hide();
}
Wrap it in a function and call the function when ever the interaction happens.

How to set the text of a cell in a row depending on order in jQuery

This is probably very simple. I have a table and would like that every 4 rows has an indicator on the side to denote a separator in the table.
http://jsbin.com/AGijUNe/2/edit
I would like it so that in the page-indicator cell in each 4th row it would either say 1,2,3 etc depending on the order.

Something like this :
$(function (){
$('tr:nth-child(4n)').addClass('row4');
$('tr:nth-child(4n) .page-indicator').each(function(i){
$(this).text(i+1);
});
});
Demo

how to do a group "unhighlight" on highlighted rows in a table

I have a table in which any time a user clicks on one of the rows it highlights the row. However as of if I have multiple rows highlighted i have to click each individual highlighted row to get rid of the highlight. I want to make it so when an individual is not clicking on the table it will get rid of the highlight on all the rows. This is the code that I am using.
//this highlights the table that has been clicked on
$('.tr_highlight').live('click',(function () {
$(this).parent().toggleClass("tr_highlight_ed");
}));
How do I get it to unhighlight(if thats a word) when clicking anywhere but the table?

You really need to post an example of the rendered markup. You don't want to do a toggleClass, you would do a removeClass selecting the parent nodes...
Assuming the following markup...
<body>
...
<table id="myTable">...</table>
...
</body>
You could bind the following..
$('body').click(function(evt){
//evt.target is what was clicked on, which bubbles up to body
//if it's anything inside #myTable, you will get the #myTable
var el = $(evt.target).closest('#myTable');
//if you didn't get #myTable, you clicked outside the table
//remove the given class from all the tr's
if (!el.length) $('#myTable .tr_highlight_ed').removeClass('tr_highlight_ed');
});

$(document).bind('click.table', function (e) {
if ( $("#my-table").has(e.target).length === 0 ) {
$("#my-table").find("tr").removeClass('tr_highlight_ed');
}
});
Everytime a user clicks anywhere on the page, it will check if the element that was clicked is inside the table; if not, we unhighlight all the rows.