JQuery loop through table get ID and change values in a specific column

Question

I have a page with 2-3 tables. In those tables I want to change the text of a specific column located in <thead> and also a value in each <td> line, and I would like to get the id from each line.

What is the fastest way to do this, performance-wise?

HTML

Table-Layout:

<table class="ms-viewtable">
   <thead id="xxx">
      <tr class ="ms-viewheadertr">
         <th>
         <th>
   <tbody>
      <tr class="ms-itmHover..." id="2,1,0">
         <td>
         <td>
      <tr class="ms-itmHover..." id="2,2,0">
         <td>
         <td>
</table>

JavaScript

Script with that I started:

$('.ms-listviewtable').each(function () {
   var table = $(this);

   $table.find('tr > th').each(function () {
      //Code here
   });

   $table.find('tr > td').each(function () {
      //Code here
   });

How can I get the Id? Is this there a better way to do what I want?

In pretty certain that a comma is not a valid character to be used inside an `id`. — David Thomas, Jun 10 '13 at 15:40
Valid characters in *ID* attribute:http://stackoverflow.com/a/79022/1451422 — Jeff Noel, Jun 10 '13 at 15:43
[those IDentifiers are valid in HTML5, no problem](http://www.w3.org/TR/html-markup/global-attributes.html#common.attrs.id). — Stano, Jun 10 '13 at 15:44
your IDs are on the _rows_, but you're iterating over the _columns_ — Alnitak, Jun 10 '13 at 15:48

score 0 · Answer 1 · answered Jun 10 '13 at 15:38

0

You can get the id of an element by calling .attr on "id" i.e. $(this).attr("id");.

answered Jun 10 '13 at 15:38

Logan

23
5

3

Nooooo! `$(this).attr('id') === this.id` – Alnitak Jun 10 '13 at 15:46

score 0 · Answer 2 · answered Jun 10 '13 at 15:41

In jquery the best way to get to any element is by giving it an ID, and referencing it.

I would structure it the other way around - give the table elements meaningful IDs, and then put the information that I'd like to retrieve in their class attributes.

<tr id="ms-itmHover..." class="2,2,0">

And then retrieve it as follows: $('#ms-itmHover...').attr('class');

score 0 · Answer 3 · answered Jun 10 '13 at 15:58

You can get the IDs by "mapping" from table row to associated ID thus:

var ids = $table.find('tbody > tr').map(function() {
    return this.id;
}).get();

You can access individual cells using the .cells property of the table row:

$table.each('tbody > tr', function() {
    var cell = this.cells[i];   // where 'i' is desired column number
    ...
});

score 0 · Answer 4 · answered Jun 10 '13 at 16:12

Go thru all tables, collect all rows and locate their identifiers by your needs:

$('table.ms-viewtable').each(function(){
    $(this).find('tr').each(function(){
        var cells = $(this).children(); //all cells (ths or tds)
        if (this.parentNode.nodeName == 'THEAD') {
            cells.eq(num).html('header row '+this.parentNode.id);
        } else { // in "TBODY"
            cells.eq(num).html('body row '+this.id);
        }
    });
});

jsfiddle

JQuery loop through table get ID and change values in a specific column

HTML

JavaScript

4 Answers4