javascript - 如何使用 JavaScript 从表格中获取单元格的数据

Question

我的网络项目经历了一段非常艰难的时期。因为我是网络相关语言的新手。我只想通过单击另一个单元格的同一行按钮来获取一个单元格的数据。我正在添加图片，请先查看。

我尝试使用如下许多代码---(第一次尝试)

我的js代码-

var tbl = document.getElementById("myTable");
        if (tbl != null) {

        for (var i = 0; i < tbl.rows.length; i++) {

                tbl.rows[i].cells[1].onclick = function (){ getval(this); };
        }
    }
    function getval(cell) {
    value(cell.innerHTML);
    }

我的html代码

<table class="w3-table-all w3-margin-top" id="myTable">
<tr>
  <th style="width:25%;">Vendor Picture Path</th>
  <th style="width:25%;">Vendor Heading</th>
  <th style="width:25%;">Vendor Body</th>
  <th style="width:25%;">Add courses</th>
</tr>

         echo '<tr>
         <td>'.$row["pic_path"].'</td>
         <td style="cursor: pointer;color:red;">'.$row["heading"].'</td>
         <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">'.$row["body"].'</div></td>
         <td><button>Add</button></td>                 
         </tr>';

我的表数据包含回显，因为我从我的 sql server 获取表数据。

第二次尝试...js代码

var tb2=document.getElementById("myTable");
        if(tb2 != null)
    {
        for(h=0;h<tb2.rows.length;h++)
        {
            bf=tb2.rows[h].cells[1];
            tb2.rows[h].cells[3].onclick=function(){getbtval(bf);};
        }
    }

             function getbtval(cell)
    {
       alert(cell.innerHTML);
    }     

和html代码一样...第一个对我有用。但这不是我的预期结果。我的代码在第二个结果上成功。但是失败了。当我单击每个添加按钮时，它只给我最后一行第二个单元格的最后一个值，即“ORACLE”。请告诉我我的代码有什么问题......

Answer 1

您的代码的问题在于您没有将事件绑定(bind)到按钮，而是选择了表格行的随机单元格。另一个问题是您没有使用 var 所以它使事情变得全局化。

你说你想点击按钮，但你的代码没有选择按钮。因此，与其到处添加事件，不如只使用一个并让事件委托(delegate)来处理它。检查是什么触发了事件。如果它是一个按钮，则选择该行，然后您可以阅读单元格的文本。

document.getElementById("myTable").addEventListener("click", function(evt) {
  var btn = evt.target;
  if(btn.tagName==="BUTTON"){
     var row = btn.parentNode.parentNode;  //td than tr
     var cells = row.getElementsByTagName("td"); //cells
     console.log(cells[0].textContent, cells[1].textContent);
  }
});

<table class="w3-table-all w3-margin-top" id="myTable">
  <tr>
    <th style="width:25%;">Vendor Picture Path</th>
    <th style="width:25%;">Vendor Heading</th>
    <th style="width:25%;">Vendor Body</th>
    <th style="width:25%;">Add courses</th>
  </tr>

  <tr>
    <td>123</td>
    <td style="cursor: pointer;color:red;">YYYY</td>
    <td>
      <div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">XXX</div>
    </td>
    <td>
      <button>Add</button>
    </td>
  </tr>
  
  <tr>
    <td>456</td>
    <td style="cursor: pointer;color:red;">dasdas</td>
    <td>
      <div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">qwwqeqwe</div>
    </td>
    <td>
      <button>Add</button>
    </td>
  </tr>  
</table>