getting td value per tr [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 6 years ago.

I have code in the following style :

<tr id="201461">
      <td id="0A" style="cursor:pointer" onClick = "ProcessTextBoxClick()" value="Feb 23 2008">Feb 23 2008</td>
      <td id="0B" style="cursor:pointer" onClick = "ProcessTextBoxClick()" value="Feb 25 2008">Feb 25 2008</td>
      <td id="0C" style="cursor:pointer" onClick = "ProcessTextBoxClick()" value="Feb 28 2008">Feb 28 2008</td></tr><tr id="201460">
       <td id="1A" style="cursor:pointer" onClick = "ProcessTextBoxClick()" value="47">47</td></tr>

I have some JQuery where I am getting the id of each row, and now I want to get each value in each td for each row. How do I do this?

 var tbl = document.getElementById("tbl-1");

    var numRows = tbl.rows.length;

    for (var i = 1; i < numRows; i++) {

        var ID = tbl.rows[i].id;

Answer 1

I want to get each value in each td for each row

Do you want the value of the value attribute, the HTML, or the HTML stripped of markup? The various answers so far have mostly gone with "the HTML", at least one went with "the HTML stripped of markup", but none (so far) has gone with "the value of the value attribute". So:

Using jQuery:

var valuesByRowID = {};
$("#tbl-1 tr").each(function() {
    valuesByRowID[this.id] = $(this).find("> td").map(function() {
        // Option 1: Getting the value of the `value` attribute:
        return this.getAttribute("value"); // or return $(this).attr("value");

        // Option 2: Getting the HTML of the `td`:
        return this.innerHTML;

        // Option 3: Getting the HTML of the `td` with markup stripped:
        return $(this).text();
    }).get();
});

The end result is an object with properties for each row, with the property name being the row's id value, and the property value being an array of the td information.

So for instance, to get the array for row 201461, you can do this:

var data = valuesByRowID["201461"]; // Note that property names are strings
var index;
for (index = 0; index < data.length; ++index) {
    alert(data[index]);
}

The above uses:

• $() to find the rows in the table.
• map (followed by get) to build the array of values.
• A simple JavaScript object to hold the result. JavaScript objects are, at heart, maps (aka dictionaries, aka associative arrays, aka name/value pair collections).

---

Off-topic:

• As I mentioned in a comment on the question, the HTML you've listed there is "invalid" in W3C terminology, td elements don't have a value attribute. You might consider using data-* attributes instead.
• As Spudley pointed out in a comment on the question, those id values are likely to cause you trouble. Recommend not having id values that start with a digit. Although valid in HTML5, they're not valid in earlier versions of HTML and not valid in CSS. Since jQuery uses CSS selectors, if you're using CSS, I would strongly advise sticking to the CSS rules. (In your case, it's really easy: Just put an d on the front of them or seomthing.)

Answer 2

If you want to loop over all <td>

$('#tbl-1 td').each(function() {
  // do stuff for each td in here...
  alert($(this).html());
})

NOTE: This is jQuery whereas your example is native JavaScript.

Answer 3

in jQuery:

$("table#tbl-1 tr").each(function( i ) {
  $("td", this).each(function( j ) {
    console.log("".concat("row: ", i, ", col: ", j, ", value: ", $(this).text()));
  });
});

You can check it in work here: http://jsfiddle.net/3kWNh/

Answer 4

You can simply do

$("td","#tbl-1").each(function(){
//access the value as
 $(this).html()

});

Answer 5

Your code does not look like jQuery. Are you sure you aren't using the term jQuery as a synonym to JavaScript? :) If that is the case, I suggest you read this question as well; it will make things a lot more clear for you.

Anyway, here goes JavaScript:

var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;

for (var i = 1; i < numRows; i++) {
    var ID = tbl.rows[i].id;
    var cells = tbl.rows[i].getElementsByTagName('td');
    for (var ic=0,it=cells.length;ic<it;ic++) {
        // alert the table cell contents
        // you probably do not want to do this, but let's just make
        // it SUPER-obvious  that it works :)
        alert(cells[ic].innerHTML);
    }
}

Alternatively, if you really use jQuery:

var table = $('#tbl-1').
var rowIds = [];
var cells = [];
$('tr', table).each(function() {
    rowIds.push($(this).attr('id'));
    $('td', $(this)).each(function() {
        cells.push($(this).html());
    });
});
// you now have all row ids stores in the array 'rowIds'
// and have all the cell contents stored in 'cells'

Answer 6

What you are using there is not jQuery, if you are using jQuery you can use .html(); to retrieve the value.

Here is your code with jQuery:

$('#tbl-1 td').each(function(){

    var ID    = $(this).attr('id');
    var value = $(this).html();

});