Getting every <td> in <tr> by index? - javascript

I want to find all td's by index (1) in every row. How can I accomplish this?
My HTML:
<table>
<thead><tr><th>Maandag</th><th>Dinsdag</th><th>Woensdag</th><th>Donderdag</th><th>Vrijdag</th></tr></thead>
<tbody>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
</tbody>
</table>
Javascript:
var index = 1;
$('tbody').children().children(':eq(' + index + ')');
This code doesn't work because it gets all children of the row and THEN gets the index. I need every second TD in every row.

You can use the nth-child selector
var index = 1;
$('tbody').find('td:nth-child('+(index+1)+')');
Demo: Fiddle

Or just plain vanilla-js
var index = 2,
tdElArr = document.querySelectorAll('table tbody tr td:nth-child(' + index + ')');
// to test this:
for(var i=tdElArr.length;i--;){
tdElArr[i].style.backgroundColor = '#cdedff'
}
table {border-collapse: collapse;}
table, th, td {border: 1px solid black;}
<table>
<thead><tr><th>Maandag</th><th>Dinsdag</th><th>Woensdag</th><th>Donderdag</th><th>Vrijdag</th></tr></thead>
<tbody>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
<tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
</tbody>
</table>

Working example http://jsfiddle.net/LZH87/
$('tbody').children().children('td:nth-child(2)').each(function() {
$(this).css({background: 'blue'});
});
I just added the css background blue to confirm that it works

This could also work (jsfiddle example)
$('tbody').children().each(function(){
$(this).find('td:odd').css({background: 'red'});
});
It's using the :odd or :even selectors in jQuery.

Try this
$('tbody').find('tr').each(function(i){
alert($('tbody').find('tr:eq('+i+')').find('td:eq(1)').text())
})
Demo link http://jsfiddle.net/dhana36/YT3CD/

Related

Increment var in td

I am trying to increment a var when I add a new tr
Table
<table id='myTable'>
<tr>
<td id="count"></td>
<td><select><option value="1">1</option></select></td>
<!--obviously some more options-->
</tr>
</table>
<button onclick="addfield()">Add</button>
Script
<script>
var row = 1;
function addfield() {
document.getElementById("count").innerHTML = row;
$("#myTable").find('tbody').append($('<tr>').append($('<td id="count">')).append($('<td><select><option value="1">1</option></select>')));
row++;
}
</script>
What's happening is, that the script is incrementing the first 'td id="count"'-Tag when adding a new 'tr'-Tag instead of incrementing the next 'td'-Tag. Additionally it doesn't show the count in the new generated 'td'-Tag.
What am I missing?
Okay, so first off let me go ahead and say that I blew up your HTML structure because it looks to me like you are using a table to do something that is not tabular, so I changed the structure to be divs. I also took the incrementing out of your script and used CSS counters to get the same effect. if using a table to hold your data is critical after all, then I guess you won't choose this answer.
HTML
<div id="myTable">
<div class="row">
<div class="cellish"><select><option value="1">1</option></select>
</div>
</div>
</div>
<button onclick="addfield()">Add</button>
CSS
body {
counter-reset: count;
}
.cellish {
display: inline-block;
}
.cellish::before {
content: counter(count) " ";
counter-increment: count;
}
JS
function addfield() {
$("#myTable").append($('<div class="row">')).append($('<div class="cellish"><select><option value="1">1</option></select>'));
}
You should not use the same id multiple times in html elements.
Change like this:
$("#myTable").find('tbody').append($('<tr>').append($('<td><select><option value="1">1</option></select>')));

Display html result at each round of javascript for loop

This has got to be answered already, but I can't find it.
[EDIT: very similar solution here:
Fade in each li one by one, however do have a look at WaldemarIce's solution below which also takes care of infinite looping very nicely]
I want consecutive rows of a table to be shown with fade in and fade out, one at a time, while all the other rows are hidden. I am using jQuery, see code below.
What I want to happen is for each row to fade in and out, one after the other.
What happens is that all the rows fade in and out together, simultaneously. How do I separate the events?
$(document).ready(function(){
for(i=0;i<3;i++){
var eqvar = "tr:eq(" + i + ")";
var thisrow = $("table#hidden").find(eqvar);
$(thisrow).fadeIn(2000);
$(thisrow).fadeOut(2000);
}
});
.hide{
display:none;
}
<table id="hidden"><tbody>
<tr class="hide"><td>Row 1</td></tr>
<tr class="hide"><td>Row 2</td></tr>
<tr class="hide"><td>Row 3</td></tr>
</tbody></table>
Example of code showing each row of the table, one at time, in infinite loop:
$(document).ready(function(){
function present () {
$('#hidden tr')
.each(function (idx) {
$(this).delay(idx * 1300).fadeIn(250).delay(800).fadeOut(250)
})
.promise().then(present)
}
present()
})
.hide {
display: none;
}
<table id="hidden">
<tbody>
<tr class="hide"><td>Row 1</td></tr>
<tr class="hide"><td>Row 2</td></tr>
<tr class="hide"><td>Row 3</td></tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
you can use like this:
$(document).ready(function(){
$("table#hidden tr").each(function(i,v){
setTimeout(function(){
var thisrow = $(v);
$(thisrow).fadeIn(2000);
$(thisrow).fadeOut(2000);
}, 4000 * i);
});
});

dynamic td blocking tr element

I have a table that if I append the rows and table data the tr element content seems to be blocked I cannot even edit it from the console after it is created I think its blocked by the td
<table id='product_table' name='product_table' align='center'>
<tbody>
</tbody>
</table>
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='21'>")
.append("<td>data21</td>")
.append("</tr>");
$("table#product_table tbody").on("click", "td", function() {
console.log('wtf');
console.log($(this).data('id'));
});
if I don't append the tr and td I can replace the td click selector with tr and it works, but if I append it nothing I do to the row has any affect even if I add css I can see it if I inspect it but it does not show or work like the cursor:pointer, but if I put them on the td element dynamically it works. any suggestions greatly appreciated.
new working code
for (i=0;i<res.data.length;i++) {
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='"+res.data[i].id+"'>" +
"<td>"+res.data[i].productNumber+"</td>" +
"<td>"+res.data[i].description+"</td>" +
"<td>"+res.data[i].productSize+"</td>" +
"<td>"+res.data[i].boxLength+"</td>" +
"<td>"+res.data[i].boxWidth+"</td>" +
"<td>"+res.data[i].boxHeight+"</td>" +
"<td>"+res.data[i].avgBilled+"</td>" +
"<td>"+res.data[i].productWeight+"</td>" +
"<td>"+res.data[i].boxQty+"</td>" +
"</tr>"
);
}
$("table#product_table tbody").on("click", "tr", function(){
console.log($(this).data());
});
The append is not properly formed when rendered. Please inspect the elements, you can find that the td is not inside the tr element.
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='21'><td>data21</td></tr>")
$("table#product_table tbody").on("click", "td", function () {
console.log('Working.');
console.log($(this).parent().data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id='product_table' name='product_table' align='center'>
<tbody></tbody>
</table>
Append doesnt not work in that way. When you append an element you only name it like ; append('div') and it opens and closes div automaticly. So you have to create element tr then add its attributes, after that you create td and set its innerHTML. Append td into tr and append tr into table. Dont use /tr in append. Append puts dynamicly created element into target element's end. Best way to create an element is document.createElement('tr');. Hope this helps
Your event's 'this' is 'td', but you are trying to reference 'tr' which is a sibling of 'td', not a child. I changed to $(this).siblings('tr').data('id') and it works. Please see the snippet.
$(function() {
$("#product_table tbody")
.append("<tr style='cursor:pointer;' data-id='21'>")
.append("<td>data21</td>")
.append("</tr>");
$("#product_table tbody").on("click", "td", function() {
console.log('wtf');
console.log($(this).siblings('tr').data('id'));
});
});
#product_table {
border: 1px #ccc solid;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='product_table' name='product_table' align='center'>
<tbody>
</tbody>
</table>

Appending a table to another table in the DOM. Targeting with no class or id available

I am currently attempting to append a specific , via jquery, to another table. Here's the HTML, and the two elements involved in the move.
<div id="content_area">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr><td></td></tr>
<tr>
<td></td> <-- TD needing to move -->
</tr>
</tbody>
</table> <-- Needs to move-->
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tbody>
<tr>
<td width="190" valign="top">
<table width="100%"></table>
<-- Move Above TD Here -->
</td>
</tr>
</tbody>
</table>
</div>
Although I'm hardly experienced with jquery/javascript, I have used the following method in the past to append a div to another div.
$(".target").appendTo($(".destination"));
This method I have used in the past required that the elements have some sort of unique identification. Since this is not possible with the current site I am developing (The software has locked down the HTML), how can I target these two tables in order to make the append?
You can view the issue at the following page:
http://xlevj.jyetp.servertrust.com/Pro-Audio-Equipment-s/1824.htm
It's pretty obvious to see on that page what I'm trying to accomplish with the move. Thanks for any help!
Try this:
//Find the td we want to move.
var tdToMove = $('#divWaitModal + table > tbody > tr:nth-child(2) td');
//Find the td we want to insert into after.
var tdToInsertAfter = $('#divWaitModal + table + table tr:first-child td:first-child');
//Detach the td to move.
tdToMove.detach();
//Insert it at the proper place.
tdToInsertAfter.after(tdToMove);
Just use child number of the node and target trough that :
$('body table:first-child').appendTo( $('table:eq(1) td:eq(0)') );
In words it takes the first table and it's appending it to second table > first cell. You can use :eq( number ) where number starts from 0, or first-child selector in some cases ..
This CSS might accomplish what you're after:
#content_area {
overflow: hidden;
}
#content_area table {
display: inline;
float: left;
}
If you want to target the elements, you can use the #content_area as a selector:
var $tables = $('#content_area>table');
var $table1 = $(tables[0]);
var $table2 = $(tables[1]);

Navigate in divs with table Jquery

I try to navigate in a table. Without the table it works, but with nope!
here's the code :
<table>
<th><div class="section selected">E1</div></th>
<th><div class="section">E2</div></th>
<th><div class="section">E3</div></th>
</table>
<br />
CLICK
then
$('#button').click(function(){
$('.selected + .section, .section:eq(0)')
.last().addClass('selected')
.siblings('.selected').removeClass('selected');
});
CSS
.selected{background:red}
And How to triggered the link with Enter Key?
Thanks!
this might want you want to do:
$('#button').click(function () {
var selected = $('.section.selected');
selected.removeClass('selected');
var tbl = selected.closest("table");
var th = tbl.find("th");
var index = selected.closest("th").index();
if(index < th.length-1) index++;
else index=0;
tbl.find(".section:eq(" + index + ")").addClass('selected');
});
this is the working DEMO.
The problem in your code was using jQuery siblings function, which goes through the all node siblings at the same DOM level, for instance if you had:
<table>
<th>
<div class="section selected">E1
</div>
<div class="section">E1 Sibling
</div>
</th>
</table>
then sibling function would select the E1 Sibling node, but non of .section nodes in your html are siblings.

Categories