卡卡網(wǎng)

HTML表格非常適合以表格形式顯示數(shù)據(jù)，實(shí)現(xiàn)后也可以支持排序，分頁和過濾記錄等功能。單擊表格單元格(table td)時(shí)，您可能需要與表進(jìn)行交互以獲取其數(shù)據(jù)。因此，在這篇文章中，我們將看看當(dāng)用戶使用jQuery單擊單元格時(shí)如何獲取表格單元格(table td)值。請(qǐng)查看下面的圖片以供參考：

jQuery獲得表格單元格(table td)值

HTML標(biāo)記

首先，在頁面上創(chuàng)建一個(gè)標(biāo)準(zhǔn)的HTML表格。對(duì)于此實(shí)例，我們的表有3列：name，age和country，以及一些隨機(jī)數(shù)據(jù)。還有一個(gè)span元素用于顯示單擊的表格單元格(table td)值。

<table id="tblData">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Maria Anders</td>
    <td>30</td>
    <td>Germany</td>
  </tr>
  <tr>
  <td>Francisco Chang</td>
    <td>24</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Roland Mendel</td>
    <td>60</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Helen Bennett</td>
    <td>28</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Yoshi Tannamuri</td>
    <td>35</td>
    <td>Canada</td>
    </tr>
  <tr>
    <td>Giovanni Rovelli</td>
    <td>46</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Alex Smith</td>
    <td>59</td>
    <td>USA</td>
  </tr>
</table>
<br/>
<span id="spnText"></span>
 

CSS

以下CSS類用于設(shè)置表及其行的樣式。該highlight CSS類樣式是選擇的表格單元格(table td)。還定義了為表行提供轉(zhuǎn)換顏色的樣式。

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
th {
  background-color: #ccd;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
tr:nth-child(odd) {
  background-color: #ddeedd;
}
.highlight {
  background-color: Yellow;
  color: Green;
}

jQuery代碼

為了獲得所單擊單元格(table td)的值，jQuery解決方案是將click事件附加到所有表格單元格(table td)，并將highlight 的 CSS 分配給單擊的單元格并獲取其值。然后通過將其指定給span元素并在屏幕上顯示該值。

這是完整的jQuery代碼：

$(document).ready(function() {
 $("#tblData tr:has(td)").mouseover(function(e) {
   $(this).css("cursor", "pointer");
 });
 $("#tblData tr:has(td)").click(function(e) {
   $("#tblData td").removeClass("highlight");
   var clickedCell= $(e.target).closest("td");
   clickedCell.addClass("highlight");
   $("#spnText").html('點(diǎn)擊表格單元格的值是: <b> ' + clickedCell.text() + '</b>');
 });
});

此jQuery代碼執(zhí)行以下功能：

• 首先，它將 mouseover 事件附加到所有TD元素，并將鼠標(biāo)光標(biāo)更改為手形樣式。這告訴用戶該單元格是可點(diǎn)擊的。
• 然后代碼將click事件附加到表的所有TD元素。在click事件中，它首先從之前單擊的TD中刪除highlight 的CSS類。然后，它使用jQuery closest()方法獲得單擊的單元格對(duì)象。此方法返回與選擇器匹配的第一個(gè)元素。它從當(dāng)前元素開始搜索，并通過DOM樹向上進(jìn)行，直到找到匹配為止。識(shí)別出當(dāng)前單擊的單元格后，我們將highlight 的CSS分配給當(dāng)前選定的單元格。最后，它獲取單擊的單元格文本并將其分配給span標(biāo)記以在屏幕上顯示。

execcodegetcode

結(jié)論

總結(jié)一下，我們剛學(xué)會(huì)了如何使用jQuery獲取點(diǎn)擊的HTML表格單元格(table td)值。jQuery解決方案是使用jQuery closest()方法來查找表元素中單擊的表格單元格。該解決方案還highlight顯示所選元素，然后在屏幕上顯示單元格的值。根據(jù)您的需要，您可以輕松修改此部分以對(duì)單元格值作進(jìn)一步操作。

您可能對(duì)以下文章也感興趣

• jQuery獲得Table表格單元格TD值的4種方式

標(biāo)簽: closest  table