I am trying to work out how to get the value of table cell for each row using jQuery.
My table looks like this:
<table id="mytable">
<tr>
<th>Customer Id</th>
<th>Result</th>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>456</td>
<td></td>
</tr>
<tr>
<td>789</td>
<td></td>
</tr>
</table>
I basically want to loop through the table, and get the value of the Customer Id column for each row.
In the code below I have worked out that I need to do this to get it looping through each row, but I'm not sure how to get the value of the first cell in the row.
$('#mytable tr').each(function() {
var cutomerId =
}
This question is related to
jquery
If you can, it might be worth using a class attribute on the TD containing the customer ID so you can write:
$('#mytable tr').each(function() {
var customerId = $(this).find(".customerIDCell").html();
});
Essentially this is the same as the other solutions (possibly because I copy-pasted), but has the advantage that you won't need to change the structure of your code if you move around the columns, or even put the customer ID into a <span>, provided you keep the class attribute with it.
By the way, I think you could do it in one selector:
$('#mytable .customerIDCell').each(function() {
alert($(this).html());
});
If that makes things easier.
$('#mytable tr').each(function() {
var customerId = $(this).find("td:first").html();
});
What you are doing is iterating through all the trs in the table, finding the first td in the current tr in the loop, and extracting its inner html.
To select a particular cell, you can reference them with an index:
$('#mytable tr').each(function() {
var customerId = $(this).find("td").eq(2).html();
});
In the above code, I will be retrieving the value of the third row (the index is zero-based, so the first cell index would be 0)
Here's how you can do it without jQuery:
var table = document.getElementById('mytable'),
rows = table.getElementsByTagName('tr'),
i, j, cells, customerId;
for (i = 0, j = rows.length; i < j; ++i) {
cells = rows[i].getElementsByTagName('td');
if (!cells.length) {
continue;
}
customerId = cells[0].innerHTML;
}
?
$('#mytable tr').each(function() {
// need this to skip the first row
if ($(this).find("td:first").length > 0) {
var cutomerId = $(this).find("td:first").html();
}
});
This works
$(document).ready(function() {
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
$("#tbl").children().children()[row].children[col].innerHTML = "H!";
}
}
});
A working example: http://jsfiddle.net/0sgLbynd/
<table>
<tr>
<td>0</td>
<td class="ms-vb2">1</td>
<td class="ms-vb2">2</td>
<td class="ms-vb2">3</td>
<td class="ms-vb2">4</td>
<td class="ms-vb2">5</td>
<td class="ms-vb2">6</td>
</tr>
</table>
$(document).ready(function () {
//alert("sss");
$("td").each(function () {
//alert($(this).html());
$(this).html("aaaaaaa");
});
});
try this :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript"><!--
function getVal(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
alert(targ.innerHTML);
}
onload = function() {
var t = document.getElementById("main").getElementsByTagName("td");
for ( var i = 0; i < t.length; i++ )
t[i].onclick = getVal;
}
</script>
<body>
<table id="main"><tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr><tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr><tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr></table>
</body>
</html>
$('#mytable tr').each(function() {
// need this to skip the first row
if ($(this).find("td:first").length > 0) {
var cutomerId = $(this).find("td:first").html();
}
});
$(document).ready(function() {
var customerId
$("#mytable td").click(function() {
alert($(this).html());
});
});
A working example: http://jsfiddle.net/0sgLbynd/
<table>
<tr>
<td>0</td>
<td class="ms-vb2">1</td>
<td class="ms-vb2">2</td>
<td class="ms-vb2">3</td>
<td class="ms-vb2">4</td>
<td class="ms-vb2">5</td>
<td class="ms-vb2">6</td>
</tr>
</table>
$(document).ready(function () {
//alert("sss");
$("td").each(function () {
//alert($(this).html());
$(this).html("aaaaaaa");
});
});
$('#mytable tr').each(function() {
var customerId = $(this).find("td:first").html();
});
What you are doing is iterating through all the trs in the table, finding the first td in the current tr in the loop, and extracting its inner html.
To select a particular cell, you can reference them with an index:
$('#mytable tr').each(function() {
var customerId = $(this).find("td").eq(2).html();
});
In the above code, I will be retrieving the value of the third row (the index is zero-based, so the first cell index would be 0)
Here's how you can do it without jQuery:
var table = document.getElementById('mytable'),
rows = table.getElementsByTagName('tr'),
i, j, cells, customerId;
for (i = 0, j = rows.length; i < j; ++i) {
cells = rows[i].getElementsByTagName('td');
if (!cells.length) {
continue;
}
customerId = cells[0].innerHTML;
}
?
Try this,
$(document).ready(function(){
$(".items").delegate("tr.classname", "click", function(data){
alert(data.target.innerHTML);//this will show the inner html
alert($(this).find('td:eq(0)').html());//this will alert the value in the 1st column.
});
});
a less-jquerish approach:
$('#mytable tr').each(function() {
if (!this.rowIndex) return; // skip first row
var customerId = this.cells[0].innerHTML;
});
this can obviously be changed to work with not-the-first cells.
$(document).ready(function() {
var customerId
$("#mytable td").click(function() {
alert($(this).html());
});
});
a less-jquerish approach:
$('#mytable tr').each(function() {
if (!this.rowIndex) return; // skip first row
var customerId = this.cells[0].innerHTML;
});
this can obviously be changed to work with not-the-first cells.
$('#mytable tr').each(function() {
var customerId = $(this).find("td:first").html();
});
What you are doing is iterating through all the trs in the table, finding the first td in the current tr in the loop, and extracting its inner html.
To select a particular cell, you can reference them with an index:
$('#mytable tr').each(function() {
var customerId = $(this).find("td").eq(2).html();
});
In the above code, I will be retrieving the value of the third row (the index is zero-based, so the first cell index would be 0)
Here's how you can do it without jQuery:
var table = document.getElementById('mytable'),
rows = table.getElementsByTagName('tr'),
i, j, cells, customerId;
for (i = 0, j = rows.length; i < j; ++i) {
cells = rows[i].getElementsByTagName('td');
if (!cells.length) {
continue;
}
customerId = cells[0].innerHTML;
}
?
This works
$(document).ready(function() {
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
$("#tbl").children().children()[row].children[col].innerHTML = "H!";
}
}
});
Try this,
$(document).ready(function(){
$(".items").delegate("tr.classname", "click", function(data){
alert(data.target.innerHTML);//this will show the inner html
alert($(this).find('td:eq(0)').html());//this will alert the value in the 1st column.
});
});
a less-jquerish approach:
$('#mytable tr').each(function() {
if (!this.rowIndex) return; // skip first row
var customerId = this.cells[0].innerHTML;
});
this can obviously be changed to work with not-the-first cells.
try this :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript"><!--
function getVal(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
alert(targ.innerHTML);
}
onload = function() {
var t = document.getElementById("main").getElementsByTagName("td");
for ( var i = 0; i < t.length; i++ )
t[i].onclick = getVal;
}
</script>
<body>
<table id="main"><tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr><tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr><tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr></table>
</body>
</html>
a less-jquerish approach:
$('#mytable tr').each(function() {
if (!this.rowIndex) return; // skip first row
var customerId = this.cells[0].innerHTML;
});
this can obviously be changed to work with not-the-first cells.
$('#mytable tr').each(function() {
// need this to skip the first row
if ($(this).find("td:first").length > 0) {
var cutomerId = $(this).find("td:first").html();
}
});
$('#mytable tr').each(function() {
var customerId = $(this).find("td:first").html();
});
What you are doing is iterating through all the trs in the table, finding the first td in the current tr in the loop, and extracting its inner html.
To select a particular cell, you can reference them with an index:
$('#mytable tr').each(function() {
var customerId = $(this).find("td").eq(2).html();
});
In the above code, I will be retrieving the value of the third row (the index is zero-based, so the first cell index would be 0)
Here's how you can do it without jQuery:
var table = document.getElementById('mytable'),
rows = table.getElementsByTagName('tr'),
i, j, cells, customerId;
for (i = 0, j = rows.length; i < j; ++i) {
cells = rows[i].getElementsByTagName('td');
if (!cells.length) {
continue;
}
customerId = cells[0].innerHTML;
}
?
Source: Stackoverflow.com