技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

jQuery使用closest()方法獲得表格單元格(table td)值

作者:admin    時間:2019-5-16 16:16:59    瀏覽:

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

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

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

HTML標記

首先,在頁面上創建一個標準的HTML表格。對于此實例,我們的表有3列:nameagecountry,以及一些隨機數據。還有一個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類用于設置表及其行的樣式。該highlight CSS類樣式是選擇的表格單元格(table td)。還定義了為表行提供轉換顏色的樣式。

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('點擊表格單元格的值是: <b> ' + clickedCell.text() + '</b>');
 });
});

此jQuery代碼執行以下功能:

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

execcodegetcode

結論

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

您可能對以下文章也感興趣

標簽: closest  table  
  • IT熱文
  • 站長推薦
财神捕鱼128 街机麻将大满贯手机版 娱乐棋牌 龙城 新会员送88彩金 河北快三跨度形态走势图 三张牌游戏炸金花 美人捕鱼下载 AG惊吓鬼屋开奖软件 梦幻西游月卡怎么赚钱 时时彩买单双没输过 手球实时比分