Getting table cell elements from a button click with Javascript

Question

Assuming I have a table like below:

The table is generated using PHP. The update button should launch one of two interfaces depending on the Report type. The problem I have is getting each Update button to correspond to the Report type in its particular row only. I have tried this with the following code :

<table id="reportTbl" border="1" style="width:100%">
  <tr>
    <th>Report</th>
    <th>Data</th>       
    <th>Update</th>
  </tr>
  <tr>
    <td>Encrypted</td>
    <td>Image</td>      
     <td><input type="submit" class="tbl_Update" value="Update" onclick="runPop();"></td>
  </tr>
  <tr>
     <td>Unencrypted</td>
    <td>Document</td>       
    <td><input type="submit" class="tbl_Update" value="Update" onclick="runPop();"></td>
  </tr>
</table>

     function runPop() {
         var pop = new myPop();
         var cells = document.getElementById('reportTbl').getElementsByTagName('td');
         for (i = 0; i < cells.length;) {
             var report = document.getElementById('reportTbl').getElementsByTagName('td')[i].innerHTML;
             pop.popOut(report);
             console.log(report);
             i += 3;
         }
     }

myPopout() represents the class which handles the two interfaces it does this by checking the Report type.

The problem with the code above is when I click the button both interfaces are opened one on top of each other which must be due to the loop. How would I fix this?

Can you update the HTML that is generated by chance? (To include a data-* attribute)? — tymeJV
– tymeJV, Commented Sep 3, 2015 at 13:40

Arun P Johny · Accepted Answer · 2015-09-03 13:42:50Z

4

You need to pass the clicked button reference to runPop then use that to get the reference to the tr element and using that you can you can get the first tr

<td><input type="submit" class="tbl_Update" value="Update" onclick="runPop(this);"></td>

then

function runPop(el) {
    var report = el.parentNode.parentNode.cells[0].innerHTML;
    var pop = new myPop();
    pop.popOut(report);
    console.log(report);
}

answered Sep 3, 2015 at 13:42

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

b0w3rb0w3r Over a year ago

Thanks you very much for your time and examples.

laruiss · Accepted Answer · 2015-09-03 13:49:41Z

3

You should not put javascript in your HTML, and you should use delegate events:

HTML:

<table id="myTable">
    <tr>
        <td>Cell #1 Row #1</td>
        <td><input type="submit" class="tbl_Update" value="Update" /></td>
    </tr>
    <tr>
        <td>Cell #1 Row #2</td>
        <td><input type="submit" class="tbl_Update" value="Update" /></td>
    </tr>
</table>

JavaScript:

var myTable = document.getElementById('myTable');
myTable.addEventListener('click', function (e) {
    var button = e.target;
    var cell = button.parentNode;
    var row = cell.parentNode;
    var rowFirstCellText = row.querySelector('td').innerHTML;
    console.log(button);
    console.log(cell);
    console.log(row);
    console.log(rowFirstCellText);
}, false);

Live example here : http://jsfiddle.net/ueg19uv4/

answered Sep 3, 2015 at 13:49

laruiss

3,8161 gold badge21 silver badges29 bronze badges

3 Comments

b0w3rb0w3r Over a year ago

Why is it bad practice to have Javascript in HTML?

laruiss Over a year ago

Well, first, because doing so you entangle Structure and Behaviour. Do you place CSS in your HTML as well? It is good practice in any language/technology/framework to separate concerns (Here, you should separate Structure in HTML, Appearance in CSS, and Behaviour in JavaScript).You should read more here: en.wikipedia.org/wiki/Unobtrusive_JavaScript

laruiss Over a year ago

Besides, you should avoid creating so much listeners (one per button, in your code), when you can have the same result with only one (in my code).

Collectives™ on Stack Overflow

Getting table cell elements from a button click with Javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related