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>';

我的表数据包含echo，因为我从我的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代码一样...... 第一个为我工作。但那不是我预期的结果。我的代码成功在第二个结果。但是失败。当我点击每个添加按钮时，它只给出了第二个单元格最后一行的最后一个值，那就是＆＃34; ORACLE＆＃34;。请告诉我我的代码有什么不对......

Answer 1

您的代码问题在于您没有将事件绑定到按钮，您正在选择表行的随机单元格。另一个问题是你没有使用var这样的事实，所以它使事情变得全球化。

你说你想点击按钮，但你的代码没有选择按钮。因此，不要在整个地方添加事件，只需使用一个，让事件委托处理它。检查是否触发了该事件。如果是按钮，则选择行，然后您可以阅读单元格的文本。

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>

Answer 2

cell.onclick = function (){ getval(this); };

this表示＆＃34;当前上下文＆＃34;，即生成点击事件的cell。

bf=tb2.rows[h].cells[1];
tb2.rows[h].cells[3].onclick=function(){getbtval(bf);};

在for循环之后，bf指向最后一行中的单元格，因此getval(bf)会返回它的值。

要访问正确的单元格，请按@epascarello建议进行DOM遍历。根据您的使用情况，使用数据属性也可能更容易：

<button data-value="Cisco">

然后在JS代码中

button.onclick = function() { alert(this.dataset.value); }

Answer 3

您需要首先识别单击的行，为此您可以通过在整个表上添加事件侦听器来检查当前单击的元素，并检查目标是否为按钮。

将事件目标作为按钮后，找到其父td及其父tr。

现在你得到tr并且只是循环遍历子节点，排除nodeType == 3，这样你只得到tr中的td元素

document.getElementById("myTable").addEventListener("click",function(e){        
  e = e || event  
  var target = e.target || e.srcElement;
  if (target.nodeName != 'BUTTON') return     
  var row = target.parentNode.parentNode;
  row.childNodes.forEach(function(item){
    if(item.nodeType !== 3)
    {
      console.log(item.textContent);
      console.log(item.innerHTML);
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>cisco-networking.jpg</td>
  <td style="cursor: pointer;color:red;">CISCO</td>
  <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">CISCO systems</div></td>
   <td><button>Add</button></td>                 
</tr>
</table>

Answer 4

我通过为td分配id并使用jquery抓取文本来完成此操作

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

4 个答案: