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?

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?

• javascript
• html-table

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

2 Answers 2

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

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/ueg19uv4/