Get the value of a table cell in javascript with external script

Question

I have a simple table filled with rows from a MySQL database, the HTML part looks like this

  <tbody>
    <?php while($row = mysqli_fetch_row($result)){ ?>
    <tr class="rows" id="<?php echo $row[0]; ?>">  // the id is an auto incremented int
      <td id="col1"><?php echo $row[1]; ?></td>
      <td id="col2"><?php echo $row[2]; ?></td>
      <td id="col3"><?php echo $row[3]; ?></td>
      <td id="col4"><?php echo $row[4]; ?></td>
      <td id="col5"><?php echo $row[5]; ?></td>
    </tr>
    <?php } ?>
  </tbody>

It gets the job done and I have a nice table. Now I want that if I click on a row, i get five variables with the values of the cells.

The problem what stopped me was to get the <td> element. This is what I tried in the external javascript file:

var rows    = document.getElementsByClassName('rows');
for (var i=0; i<rows.length; i++){
    rows[i].onclick = function(){
        console.log(this.getElementById('col1')); // I tried to print it first
    }
}

The console responded this: Uncaught TypeError: undefined is not a function.

Then I tried console.log(rows[i].getElementById(vonalkod));, but it responded Uncaught TypeError: Cannot read property 'getElementById' of undefined

If I only write console.log(this); then it prints what I expect, the whole row in html.

So my question is that what is the syntax to get those cells by ID?

blgt · Accepted Answer · 2014-07-18 13:06:17Z

1

What you can do to get the contents of a cell is

document.getElementById('col1').innerHTML

Now, having said that, it will only work if you have ONE col1: if you have more than one of these <tr>s each will have five tds like <td id=col1>, the same for the rest of the id-s. That's invalid HTML. Consider replacing those id-s with classes, or with additional PHP.

Or, better yet, you can forgo all these clumsy id-s entirely and use something like:

rows[i].onclick = function() {
    console.log(this.childNodes[0].innerHTML); // col1
    console.log(this.childNodes[1].innerHTML); // col2
    // ... etc
}

edited Jul 18, 2014 at 13:06

answered Jul 18, 2014 at 12:57

blgt

8,2151 gold badge27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

digitaltos Over a year ago

Thank you for noticing my duplicated ID-s, and you're right, I should have used childNotes. Thank you very much.

Alessandro · Accepted Answer · 2014-07-18 13:09:45Z

1

It doesn't work because the object this is a HTMLTableRowElement (see http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/html2/HTMLTableRowElement.html)

Here a library as jQuery comes very handy. Your script written using jQuery is as easy as

jQuery('.rows').click(function(){
    alert(jQuery(this).children('#col1').text());
});

answered Jul 18, 2014 at 13:09

Alessandro

1,4539 silver badges19 bronze badges

2 Comments

digitaltos Over a year ago

Well, it turns out my biggest problem was that I didn't know what the this object was. Thank you for the useful information.

Alessandro Over a year ago

@nandoo you definetely need to use a debugger such as the one built-in developer tools of Chrome. You can open developer tools, go to the row where everything is breaking, set a breakpoint and add to the watchlist to the right "this" and click the element with the handler. There you'll know everything about your variables

Collectives™ on Stack Overflow

Get the value of a table cell in javascript with external script

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related