Develop Reference

Simple way to add rowspan in HTML table

I am trying to generate a HTML Table, that has rowSpan (as you see in the picture)
I manage to generate the table for columns 1 and 2 and 3. Here is the code:
<td rowspan="2"> a</td>
<td>bb</td>
<td>d</td>
</tr>
<tr>
<td>c</td>
<td>e</td>
</tr>
but when it gets to column4, I can't figure out what to do. I create a nested table but it doesn't work properly.
Anyone has any idea?

I think you're looking for this - the first column spans 3 rows, the middle columns span just a single row, and the top right column is again 2 rows spanned:
<table border="1">
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
<th>col 4</th>
</tr>
<tr>
<td rowspan="3">a</td>
<td rowspan="2">b</td>
<td rowspan="2">c</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
</table>

See https://jsfiddle.net/gpnx0nqj/
Note that the second row only have two cells (td).

get hidden input[type=hidden] in different column

I have some minor issue about how to get hidden input field in different column. Below is my code just for your reference.
<table class="table table-bordered table-striped table-condensed" id="table_data">
<thead class="header">
<tr class="well">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="hidden" id="changesID" value="no" />A</td>
<td id='1'>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td><input type="hidden" id="changesID" value="no" />E</td>
<td id='2'>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td><input type="hidden" id="changesID" value="no" />I</td>
<td id='3'>J</td>
<td>K</td>
<td>L</td>
</tr>
</tbody>
</table>
Javascript
$(document).ready(function () {
$('table').on( 'click', 'tbody td:not(:first-child)', function (e) {
var id = $(this).attr('id');
console.log(id)
});
});
When I click on 2nd column it should display id and hidden input fields that located at first column
1
no
Anyone got idea ?Any help will greatly appreciate. Thank you
https://jsfiddle.net/ash_systm/05y977vf/

$(this).prev().children()[0].value
$(document).ready(function() {
$('table').on('click', 'tbody td:not(:first-child)', function(e) {
var id = $(this).attr('id');
console.log(id)
var val = $(this).prev().children()[0].value;
console.log(val)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-condensed" id="table_data">
<thead class="header">
<tr class="well">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="hidden" id="changesID" value="no" />A</td>
<td id='1'>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>
<input type="hidden" id="changesID" value="no" />E</td>
<td id='2'>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>
<input type="hidden" id="changesID" value="no" />I</td>
<td id='3'>J</td>
<td>K</td>
<td>L</td>
</tr>
</tbody>
</table>

Try this:
$(document).ready(function(){
$("tr").click(function(){
var id = $(this).children().next().attr('id');
var hiddenVal = $(this).children().find('#changesID').val();
console.log(id);
console.log(hiddenVal);
});
});
It will work

better is not use multiple element with same id, some changes in html and javascript. try this code:
<tr>
<td><input type="hidden" id="changesID" class="changeId" value="no" />A</td>
<td class="idCol" id='1'>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td><input type="hidden" id="changesID" class="changeId" value="no" />E</td>
<td id='2'>F</td>
<td>G</td>
<td>H</td>
</tr>
Javascript
$(document).ready(function () {
$('table tbody tr').on( 'click', 'td:not(:first-child)', function (event) {
var changeCol = $(event.delegateTarget).find(".changeCol");
var idCol= $(event.delegateTarget).find(".idCol");
var id = $(idCol).attr('id');
console.log(id)
var change = $(changeCol).attr('id');
console.log(change)
});
});

IE9 - Loading html table into a page with jQuery

I have built a very simple example, loading a table into a page via ajax from another html page and it works fine in all browsers, except IE9, that seems to nest tables. Replacing table with div isn't an option here.
What would be the workaround for it?
(I'm using jquery-1.8.1)
Here is my code:
index.html
<table id="table_id">
<thead>
<tr>
<th>Sort Column 1</th>
<th>Sort Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<button>load new data</button>
<script type="text/javascript">
$(document).ready(function () {
var tbl = $('#table_id');
$("button").on("click", function () {
var xhr = $.ajax("table.html")
.done(function (data) {
tbl.html(data);
});
});
});
</script>
table.html
<table id="table_id">
<thead>
<tr>
<th>Sort Heading 1</th>
<th>Sort Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 New Data 11</td>
<td>Row 1 New Data 22</td>
</tr>
<tr>
<td>Row 2 New Data 11</td>
<td>Row 2 New Data 22</td>
</tr>
</tbody>
</table>

You can use .replaceWith
$('#table_id').replaceWith(data);
Because .html replaces internal content. In our case, after use .html table look like this
<table id="table_id">
<table id="table_id">
...
</table>
</table>

How to delete the last column in an HTML TABLE using by jquery?

I have an HTML TABLE:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
<th>Message</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
<td>etc</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
<td>etc</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>etc</td>
</tr>
</tbody>
</table>
<input type="button" onclick="deleteLastColumn();" value="do it"/>
I need a javascript/jquery code, which delete the last column (message) in the table:
function deleteLastColumn() {
$("#theadID tr th:not(:last-child)......
$("#tbodyID tr td:not(:last-child)......
}
So the result should be this:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
</tr>
</tbody>
</table>
I know there is the ":not(last)" method, but I can't find any example to my problem.
Could anyone help me?

Try
$('#persons tr').find('th:last-child, td:last-child').remove()
Demo: Fiddle

You can use this solution to achieve it easily..
function myFunction() {
var allRows = document.getElementById('my_table').rows;
for (var i=0; i< allRows.length; i++) {
allRows[i].deleteCell(-1);
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="my_table">
<thead >
<th>Column 1</td>
<th>Column 2</td>
<th>Column 3</td>
</thead >
<tr >
<td>Number 1</td>
<td>String 1</td>
<td>Decimal 1</td>
</tr>
<tr >
<td>Number 2</td>
<td>String 2</td>
<td>Decimal 2</td>
</tr>
<tr >
<td>Number 3</td>
<td>String 3</td>
<td>Decimal 3</td>
</tr>
</table><br>
<button onclick="myFunction()">Remove Last Column</button>
</body>
</html>

In addition to Arun P Johny's answer,
That would let you remove last row each time you click the button. If you just want to remove one column, not others you may try this.
function deleteLastColumn() {
$(document).find('.last').remove()
}
after adding class last to the last td and th of the table.
Demo : Fiddle

Unexpected Behavior of :even pseudo selector in jquery

I have created this fiddle for problem as you will see there are three tables having zebra strip using jQuery.
Table 1 is showing in correct form as it start tr index from 0 as even. Table 2 is continuing from last table and it is showing 1st row as white instead of dark. I think it is happening due to it is continuing from last table's tr index.
HTML:
<table>
<caption> Table 1</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>
<table>
<caption> Table 2</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>
<table>
<caption> Table 3</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>​
JavaScript:
$('table').find('tr:even').css('background','#d0d0d0');
Fiddle: http://jsfiddle.net/daljir/gryh5/

You can use find() to 'work' with each table separately:
$("table").find("tr:even").css("background", "#d0d0d0");
DEMO: http://jsfiddle.net/gryh5/1/

You are selecting all the <tr> elements in the document, you can use the nth-child to selector to select all the even numbered <tr>s in the document.
$('table tr:nth-child(2n)').css('background','#d0d0d0');
http://jsfiddle.net/Kyle_Sevenoaks/gryh5/7/

This is because you are selecting all the tr's in general (irrespective of the table) and when they are stacked you would get this particular behavior.
Try this:
$('table').find('tr:even').css('background','#d0d0d0');
Check FIDDLE

This works
<table id="t1">
<caption> Table 1</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>
<table id="t2">
<caption> Table 2</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>
<table id="t3">
<caption> Table 3</caption>
<tr>
<th>Table Head 1</th>
<td>Table Data 1</td>
</tr>
<tr>
<th>Table Head 2</th>
<td>Table Data 2</td>
</tr>
<tr>
<th>Table Head 3</th>
<td>Table Data 3</td>
</tr>
</table>
and JS:
$(function(){
$('#t1 tr:even, #t2 tr:even, #t3 tr:even').css('background','#d0d0d0');
});
jsfiddle: http://jsfiddle.net/SnakeEyes/gryh5/2/

http://jsfiddle.net/gryh5/9/
$('table').each(function(){
$(this).find('tr').filter(':even').css('background','#d0d0d0');
});