如何使用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抓取文本來完成此操作