getting td value per tr [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist

Closed 9 years ago.

Improve this question

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:poi开发者_高级运维nter" 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;

---

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'

---

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/

---

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.)

---

You can simply do

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

});

---

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();

});

---

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.