如何使用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

代码的问题是您没有将事件绑定到按钮，而是选择了表行的随机单元格。 另一个问题是您没有使用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表示“当前上下文”，即产生点击事件的cell 。

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

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

要访问适当的单元格，请按照@epascarello的建议进行DOM遍历。 根据您的用例，使用data属性也可能会更容易：

<button data-value="Cisco">

然后在JS代码中

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

Answer 3

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

将事件目标作为button获取后，找到其父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抓取文本来完成此操作