如何在多個表中單擊特定列中的行元素時獲取表 ID 和值？

Question

我需要一些幫助來編寫 javascript function 以在單擊多個表中的特定列（層）時檢索單擊的值以及表 ID。

例如，當我單擊第 1 層時，我試圖將其分配給 tier_token 並根據表 id 設置客戶端 --> tier_token=Tier 1, client=products。 如果我點擊 Tier 2，tier_token=Tier 1，client=products。 如果我從客戶表中單擊第 1 層，則 tier_token=Tier 1 和 client=customers，依此類推。

在我的腳本中，我一直在使用document.getElementById ，我想擁有一些可以同時用於多個表 id 的東西，檢索該 id 值，並將其設置為變量 client - 因為雖然我只列出了幾個表，我需要稍后定義多個表。

另外，我想只允許點擊 Tier 列並阻止點擊 Points 列。

<html>
<table class="table" id="products">
<tr>
    <th>Tier</th>
    <th>Points</th>
</tr>
    <tr>
    <td>Tier1</td>
    <td>0</td>
  </tr>
   <tr>
    <td>Tier2</td>
    <td>10</td>
  </tr>
   <tr>
    <td>Tier3</td>
    <td>100</td>
  </tr>
</table>
 
  <table class="table" id="customers">
   <tr>
    <th>Tier</th>
    <th>Points</th>
   </tr>
    <tr>
    <td>Tier1</td>
    <td>10</td>
  </tr>
   <tr>
    <td>Tier2</td>
    <td>20</td>
  </tr>
   <tr>
    <td>Tier3</td>
    <td>500</td>
  </tr>
   <tr>
    <td>Tier4</td>
    <td>21</td>
  </tr>
  </table>
</html>

腳本：

<script>
var table = document.getElementById("customers");
    if (table != null) {
        for (var i = 1; i < table.rows.length; i++) {
            for (var j = 0; j < table.rows[i].cells.length; j++)
            table.rows[i].cells[j].onclick = function () {
                tableText(this);
            };
        }
    }
    function tableText(tableCell) {
        //alert(tableCell.innerHTML);
        var tier_token=tableCell.innerHTML;
        var client = "customers";
        console.log("Tier:"+ tier_token);
        console.log("Client:"+ client);
        alert("Tier:"+ tier_token + "Client:"+ client);
    }

</script>

Answer 1

您可以使用$("table td:first-child")選擇器，僅當單擊第一個 td 時才會調用它，然后在此處理程序中使用.text()獲取單擊的 td 和closest('table').attr('id')獲取表的 id。

演示代碼：

 //click only on first child(1st columns tds) $("table td:first-child").on("click", function() { var texts = $(this).text(); //get text of td which is clicked var ids_ = $(this).closest("table").attr('id') //get clsest table where click event has taken place using that get `id` of table console.log("TEXT " + texts + " ID " + ids_) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table" id="products"> <tr> <th>Tier</th> <th>Points</th> </tr> <tr> <td>Tier1</td> <td>0</td> </tr> <tr> <td>Tier2</td> <td>10</td> </tr> <tr> <td>Tier3</td> <td>100</td> </tr> </table> <table class="table" id="customers"> <tr> <th>Tier</th> <th>Points</th> </tr> <tr> <td>Tier1</td> <td>10</td> </tr> <tr> <td>Tier2</td> <td>20</td> </tr> <tr> <td>Tier3</td> <td>500</td> </tr> <tr> <td>Tier4</td> <td>21</td> </tr> </table>

閱讀更多：

https://api.jquery.com/closest/

https://api.jquery.com/first-child-selector/

https://api.jquery.com/text/

Answer 2

 //click only on first child(1st columns tds) $("table td:first-child").on("click", function() { var texts = $(this).text(); //get text of td which is clicked var ids_ = $(this).closest("table").attr('id') //get clsest table where click event has taken place using that get `id` of table console.log("TEXT " + texts + " ID " + ids_) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table" id="products"> <tr> <th>Tier</th> <th>Points</th> </tr> <tr> <td>Tier1</td> <td>0</td> </tr> <tr> <td>Tier2</td> <td>10</td> </tr> <tr> <td>Tier3</td> <td>100</td> </tr> </table> <table class="table" id="customers"> <tr> <th>Tier</th> <th>Points</th> </tr> <tr> <td>Tier1</td> <td>10</td> </tr> <tr> <td>Tier2</td> <td>20</td> </tr> <tr> <td>Tier3</td> <td>500</td> </tr> <tr> <td>Tier4</td> <td>21</td> </tr> </table>

如何在多個表中單擊特定列中的行元素時獲取表 ID 和值？

問題描述

2 個解決方案

解決方案1
0 已采納 2021-01-29 15:38:12

解決方案2
0 2022-08-11 17:39:48

如何在多個表中單擊特定列中的行元素時獲取表 ID 和值？

問題描述

2 個解決方案

解決方案1 0 已采納 2021-01-29 15:38:12

解決方案2 0 2022-08-11 17:39:48

解決方案1
0 已采納 2021-01-29 15:38:12

解決方案2
0 2022-08-11 17:39:48