I've been trying to figure out a wait to get this to work with having multiple tables on a single web page.
<table class="table table-striped basic">
<thead>
<tr>
<th>Saturday</th>
<th class="time">10:30am</th>
<th class="time">11:00am</th>
<th class="time">11:30am</th>
<th class="time">12:00pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<script>
var time = $('.time').text();
$(function() {
$('table td:nth-child(2)').attr('data-before-content', time);
$('table td:nth-child(3)').attr('data-before-content', time);
$('table td:nth-child(4)').attr('data-before-content', time);
$('table td:nth-child(5)').attr('data-before-content', time);
});
</script>
CSS:
.table td:nth-child(2)::before {
content: attr(data-before-content);
}
Trying to figure out a way to get the context of each "th" and place it ::before in the CSS while having multiple tables. Any suggestions?
Are you thinking something along the lines of this? You can use a combination of .each(), .eq(), and .not()
$('table tr').each(function(){
$('td', this).not(':first-child').each(function(i){
$(this).attr('data-before-content', $('.time').eq(i).text());
});
});
.table td:before {
content: attr(data-before-content) '\00a0';
}
.table td {
padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped basic">
<thead>
<tr>
<th>Saturday</th>
<th class="time">10:30am</th>
<th class="time">11:00am</th>
<th class="time">11:30am</th>
<th class="time">12:00pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
</tbody>
</table>
In case the .time data is table specific (which is more likely the case I would think), I'd recommend using this instead:
$('table tr').each(function(){
var $t = $(this).closest('table').find('.time');
$('td', this).not(':first-child').each(function(i){
$(this).attr('data-before-content', $t.eq(i).text());
});
});
.table td:before {
content: attr(data-before-content) '\00a0';
}
.table td {
padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped basic">
<thead>
<tr>
<th>Saturday</th>
<th class="time">10:30am</th>
<th class="time">11:00am</th>
<th class="time">11:30am</th>
<th class="time">12:00pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
</tbody>
</table>
<table class="table table-striped basic">
<thead>
<tr>
<th>Monday</th>
<th class="time">7:30pm</th>
<th class="time">9:00pm</th>
<th class="time">10:30pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/7/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
</tr>
<tr>
<td>3/7/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
</tr>
</tbody>
</table>
var time = $('.time'); returns an all the text of all element with the class .time. Instead, you should use something like $('.time:nth-child('+i+')').text() inside a for-loop.
<script>
var time = $('.time');
$(function() {
for(var i = 0, len=time.length; i<len; i++){
$('table td:nth-child(' +i+ ')').attr('data-before-content', $(time[i]).text());
}
});
</script>
Related
I'm trying to find on click a data attribute from the tr element of a table with the delegated click event, but it doesn't return anything, what am I wrong?
I made a fiddle to try and test
document.querySelector('table#listaCar tbody').addEventListener('click', e => {
if (e.target.matches(".car-item")) {
alert(e.target.getAttribute('data-id-car'));
}
});
table#listaCar tbody tr {
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table id="listaCar" class="table table-bordered table-hover bg-white">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Status</th>
<th scope="col">Date</th>
<th scope="col">N. IUV</th>
</tr>
</thead>
<tbody>
<tr data-id-car="4140" class="car-item">
<td>4140</td><td>TO PAY</td><td>13-05-2022</td><td>10</td>
</tr>
<tr data-id-car="4129" class="car-item">
<td>4129</td><td>TO PAY</td><td>12-05-2022</td><td>15</td>
</tr>
</tbody>
</table>
e.target is the td, not the tr.
Easiest solution is to use .parentNode to get the td's parent: the tr then you can test using matches and get the data attribute as desired
const tr = e.target.parentNode;
if (tr.matches(".car-item")) {
alert(tr.getAttribute('data-id-car'));
}
document.querySelector('table#listaCar tbody').addEventListener('click', e => {
const tr = e.target.parentNode;
if (tr.matches(".car-item")) {
alert(tr.getAttribute('data-id-car'));
}
});
table#listaCar tbody tr {
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table id="listaCar" class="table table-bordered table-hover bg-white">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Status</th>
<th scope="col">Date</th>
<th scope="col">N. IUV</th>
</tr>
</thead>
<tbody>
<tr data-id-car="4140" class="car-item">
<td>4140</td><td>TO PAY</td><td>13-05-2022</td><td>10</td>
</tr>
<tr data-id-car="4129" class="car-item">
<td>4129</td><td>TO PAY</td><td>12-05-2022</td><td>15</td>
</tr>
</tbody>
</table>
You need to do a test on the element click to see if it is a table cell (TD) and if it is grab the parent.
In my example I am looping through all the rows to apply the click.
document.querySelectorAll('.car-item').forEach(item => {
item.addEventListener('click', e => {
let el = e.target.tagName === "TD" ? e.target.parentElement : e.target;
alert(el.getAttribute('data-id-car'));
});
});
table#listaCar tbody tr {
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table id="listaCar" class="table table-bordered table-hover bg-white">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Status</th>
<th scope="col">Date</th>
<th scope="col">N. IUV</th>
</tr>
</thead>
<tbody>
<tr data-id-car="4140" class="car-item">
<td>4140</td><td>TO PAY</td><td>13-05-2022</td><td>10</td>
</tr>
<tr data-id-car="4129" class="car-item">
<td>4129</td><td>TO PAY</td><td>12-05-2022</td><td>15</td>
</tr>
</tbody>
</table>
I have a bootstrap like this in main.html page:
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
My requirement is:
When I click on any row of the table( either on the text or even in the space between two columns) it has to redirect to another Html page.
how can I do that?
try this code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table class="table table-striped" id="tableId">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script>
function addRowHandlers() {
var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row)
{
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
alert("id:" + id);
window.location.href = "http://www.w3schools.com";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
window.onload = addRowHandlers();
</script>
</body>
</html>
You can also achieve this by using Javascript on tr (inline) :
<tr onclick="document.location = 'links.html';">
In this way you can set different links for different rows. Please check below updated HTML snippet :
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr onclick="document.location = 'http://www.google.com';">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr onclick="document.location = 'http://www.himanshu.com';">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr onclick="document.location = '/links.html';">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Please find below the code that will redirect you to another link on click of any rows (except header row)
Add click event on all the rows inside the table body and execute your task.
$(function() {
$('tbody tr').click(function() {
window.location.href = 'https://www.google.com';
})
})
)
First, i suggest to add class to <tr> tag (so if you plan to have multiple tables in page it does not affect other table)
Then, i assume your using jquery and you have dynamic table rows.
#.link is the class <tr class="link" data-href="https://google.com">...</tr>
#:not(a) => added this so you can add other link `<a>` to your row (remove it if not needed...)
// same page redirect
$(document).on('click', 'tr.link:not(a)', function(e){
e.stopPropagation(); // only add this if you have <a> tag in row
window.location.href = $(this).data('href'); // dynamic link
});
// new tab redirect
$(document).on('click', 'tr.link', function(){
$('External Link')[0].click();
});
It can be done using jQuery. Bind an event listener on click of TR and then redirect the user as needed.
Your HTML
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
jQuery Code
$(function() {
$('tr').on('click', function() {
document.location.href = 'https://google.com';
});
});
Plain JavaScript
var table = document.getElementById('js-table');
for(var i = 0; i < table.rows.length; i++) {
table.rows[i].addEventListener('click', function() {
document.location.href = "https://google.com"
});
}
A record with new and old price value,
if new price is different to old one, and highlight the record.
I want to use "setTimeout" function,and the highlight effects will disappear after 10s. How can I highlight the table rows base on values?
I use the jQuery-UI framework.
$(function(){
setTimeout(change(), 3000);
});
function change(){
$(".table-striped").find("tr").each(function () {
$("td").filter(function() {
return $(this).text().indexOf("200") != -1;
}).parent().toggleClass("highlight",5000).removeClass("highlight");
});
}
<table class="table table-striped">
<thead>
<tr>
<th>New Price</th>
<th>Old Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
<td>1000</td>
</tr>
<tr>
<td>1000</td>
<td>1000</td>
</tr>
</tbody>
</table>
.highlight {
background: red !important;
color: green !important;
}
I have solved your issue with jquery please check my answer.
$(document).ready(function(){
$('tbody tr').each(function( i, val){
var nprice = $(this).children('.new_price').html();
var oprice = $(this).children('.old_price').html();
if(nprice != oprice){
$(this).addClass('divtoBlink');
//$(this).children('td').css('background-color','red');
}
});
setInterval(function () {
$(".divtoBlink").css("background-color", function () {
this.switch = !this.switch
return this.switch ? "red" : ""
});
}, 100);
setInterval(function () {
$('tr').removeClass('divtoBlink').css('background-color','white');
}, 5000)
});
.divtoBlink {
width:100px;
height:20px;
background-color:#627BAE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th class="text-center">Id#</th>
<th>Session Eamil</th>
<th>Login Url</th>
<th>Date</th>
<th>Status</th>
<th>New Price</th>
<th>Old Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">#counter11</td>
<td>#item.SessionEmail11</td>
<td>#item.LoginUrl11</td>
<td>#item.CreatedAt11</td>
<td>Failed11</td>
<td class="new_price">200</td>
<td class="old_price">1000</td>
</tr>
<tr>
<td class="text-center">#counter12</td>
<td>#item.SessionEmail12</td>
<td>#item.LoginUrl12</td>
<td>#item.CreatedAt12</td>
<td>Failed12</td>
<td class="new_price">1000</td>
<td class="old_price">1000</td>
</tr>
</tbody>
</table>
Is this what you are looking for? I made it highlight using jquery ui's "highlight" effect with a timeout of 10 seconds as you wished.
Code below :
$(function(){
var elementToHighlight = '';
$(".table-striped tbody tr").each(function(i, el) {
if ($(el).children(':first').html() != $(el).children(':last').html()) {
if (i == $(".table-striped tbody tr").length - 1) {
elementToHighlight += '.table-striped tbody > :eq(' + $(el).children(':first').parent().index() + ')';
} else {
elementToHighlight += '.table-striped tbody > :eq(' + $(el).children(':first').parent().index() + '), ';
}
}
});
if (elementToHighlight.substr(-2) == ', ') {
elementToHighlight = elementToHighlight.substr(0, elementToHighlight.length-2)
}
var blink = setInterval(function(){
$(elementToHighlight).effect('highlight', {color: 'red'}, 1000);
}, 1000);
setTimeout(function() {
clearInterval(blink);
}, 10000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>New Price</th>
<th>Old Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
<td>1000</td>
</tr>
<tr>
<td>1000</td>
<td>1000</td>
</tr>
<tr>
<td>400</td>
<td>1000</td>
</tr>
<tr>
<td>500</td>
<td>500</td>
</tr>
<tr>
<td>700</td>
<td>700</td>
</tr>
<tr>
<td>200</td>
<td>900</td>
</tr>
</tbody>
</table>
How can I have 2 or more tables on 1 page with only viewing 1 table at the time with dropdown menu you choose which table to show without a button or refreshing the page? Does anyone have an idea? Atleast we need to use ajax/js. I use datatables plugin for my tables. Here is a Fiddle
<select>
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>
You can use jquery hide/show method to do the same.
Please take a look at the fiddle
Below code handles showing/hiding of tables
$(function() {
$('#table1').wrap('<div id="hidetable1" class="hide" style="display:none"/>');
$('#table2').wrap('<div id="hidetable2" class="hide" style="display:none"/>');
$('#table3').wrap('<div id="hidetable3" class="hide" style="display:none"/>');
$('#table1').DataTable( {
"searching": true
} );
$('#table2').DataTable( {
"searching": true
} );
$('#table3').DataTable( {
"searching": true
} );
console.log($("#drop"))
$("#hide"+ $("#drop")[0].value).show();
$("#drop").change(function () {
var end = this.value;
$('.hide').hide();
$("#hide"+end).show();
});
});
You can do it by making an onchange function, giving ids to the table and displaying table according to the value like this
function display(val){
document.getElementById(val).style.display = "block";
val== "table1"?document.getElementById("table2").style.display = "none":document.getElementById("table1").style.display = "none";;
}
#table2{
display:none;
}
<select onchange = "display(this.value)">
<option value='table1' selected>table1</option>
<option value='table2'>table2</option>
</select>
<table border='1' id="table1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
If you have more than two tables, you can simply do it by adding a class
function display(val){
var el = document.getElementsByClassName("allTables");
for(i=0; i<el.length; i++) {
el[i].style.display = "none";
}
document.getElementById(val).style.display = "block";
}
.allTables{
display:none;
}
#table1{
display:block;
}
<select onchange = "display(this.value)">
<option value='table1' selected>table1</option>
<option value='table2'>table2</option>
<option value='table3'>table3</option>
</select>
<table border='1' id="table1" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table3" class="allTables">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
Initially set any one table which you want to display and make all the others hide. Then pass the selected table id to the onchange propery then hide all the other tables. To get all the tables which we want to hide, group it under a class name.
function show(){
var selectedTable= document.getElementById("drp").value;
var elements = document.getElementsByClassName('tableClass')
for (var i = 0; i < elements.length; i++){
if(elements[i].id==selectedTable)
elements[i].style.display = '';
else
elements[i].style.display = 'none';
}
}
<select onchange="show(value)" id="drp">
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>
</br></br>
<table border='1' id="table1" class="tableClass">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
<table border='1' id="table2" class="tableClass" style="display:none;">
<thead>
<tr>
<th>ID</th>
<th>type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Male</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
I want to create a master-detail. So, I follow this tutorial:
http://mrbool.com/how-to-create-a-master-detail-table-with-html-css-and-jquery/26848
I decided to reproduce it, but there is something wrong in my code(?).
Here's my code:
HTML/jQuery
<!DOCTYPE html>
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
$(".clk").click(function () {
var index = $(this).parent().parent().index();
var detail = $(this).parent().parent().next();
var status = $(detail).css("display");
if (status === "none")
$(detail).css("display", "table-row");
else
$(detail).css("display", "none");
});
});
</script>
</head>
<body>
<table id="tbSales" rules="rows">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Date</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="saleRow">
<td></td>
<td>01</td>
<td>01/01/2001</td>
<td>2</td>
<td>10,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>Product A 1</td>
<td>1</td> <td>7,00</td>
</tr>
<tr>
<td>A2</td>
<td>Product A 2</td>
<td>1</td>
<td>3,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="saleRow">
<td></td>
<td>02</td>
<td>02/02/2001</td>
<td>3</td>
<td>20,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>Product B 1</td>
<td>1</td>
<td>10,00</td>
</tr>
<tr>
<td>B2</td>
<td>Product B 2</td>
<td>2</td>
<td>5,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tbody>
</table>
</body>
CSS:
#tbSales, .tbItems{
width:100%;
border:solid 1px;
}
#tbSales thead th, .tbItems thead th{
text-align:left;
}
#tbSales tr td, .tbItems tr td{
border:solid 1px;
}
#tbSales tr td:nth-child(1){
width:20px;
}
#tbSales tbody tr{
background:#DCDCDC;
}
.tbItems tr{
background:red;
}
#tbSales thead{
background:#4682B4;
}
.itemsRow{
display: none;
}
.tbItems{
font-size:12px;
}
This is what should happen:
This is what happen to me:
The row is empty! Why?
$("td:nth-child(1)")
Is overriding all first children from table.
You need to specify the line in which you want to replace the cell:
$(".saleRow td:nth-child(1)")
Your first line of javascript replaces the contents of all first children from your table.
Change :
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
with :
$("td:nth-child(1)").css("border","red dashed 2px")
and you'll see what I mean.
See it here : http://codepen.io/jeremythille/pen/qELyWX
td:nth-child(1) means "Every first <td> of each <tr> of the whole table". But you have nested tables...