最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Getting table cell elements from a button click with Javascript - Stack Overflow

programmeradmin1浏览0评论

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?

Share Improve this question edited Sep 3, 2015 at 13:42 b0w3rb0w3r asked Sep 3, 2015 at 13:38 b0w3rb0w3rb0w3rb0w3r 9373 gold badges12 silver badges33 bronze badges 1
  • 1 Can you update the HTML that is generated by chance? (To include a data-* attribute)? – tymeJV Commented Sep 3, 2015 at 13:40
Add a ment  | 

2 Answers 2

Reset to default 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);
}

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/

发布评论

评论列表(0)

  1. 暂无评论