首頁 > 文章 > web前端 > jQuery取得Table某列的值詳解

jQuery取得Table某列的值詳解

小云云原創: 2018-01-23 16:01:224202瀏覽

本文主要介紹了jQuery取得Table某列的值,非常不錯，具有參考借鏡價值，需要的朋友可以參考下，希望能幫助到大家。

但是與此篇所說的完全不一樣。這篇Insus.NET需要的是jQuery去取得html table的某一行某一列的資料。

如下表：

Html code:

<table>
    <tr>
      <th style="width:10px;"><input id="SelectAll" type="checkbox" /></th>
      <th>ID</th>
      <th>费用名目</th>
      <th>费用解释</th>
      <th>收费明细</th>
      <th>币种</th>
      <th style="width:50px;">操作</th>
    </tr>
    @foreach (var m in new HighwayAdditionalChargeEntity().HighwayAdditionalCharges())
      {
      <tr class="trData">
        <td><input id="" class="SelectSingle" type="checkbox" value="@m.HighwayAdditionalCharge_nbr" /></td>
        <td>@m.HighwayAdditionalCharge_nbr</td>
        <td>@m.Item</td>
        <td>@m.Description</td>
        <td>@m.Itemizations</td>
        <td>@m.Currency</td>
        <td>
          <input class="Select" id="ButtonSelect" type="button" value="选择" />
        </td>
      </tr>
    }
  </table>

當使用者點擊某一行最後一列的「選擇」銨鈕時，想取得此銨鈕本行中某一列的資料。

Insus.NET有在圖中示出，列與索引。索引是從0開始。如想取得「費用名義」列值，此列的列索引是2。

示範：

#上面我們取得值，是使用了.text()方法。但某一時候，你想取得列的值，它是html程式碼，那我們可以使用.html()方法。下面Insus.NET稍修改一下：

示範：

其實，使用索引來取得值，只是一種方法，但它不是Insus.NET最理想的方法首選。由於資料行是動態呈現，所以列也有可能會變更。因此Insus.NET還是習慣使用樣式class來實現：

舉個列子，想取得「費用解釋」列的值，在此欄位中新增一個class:

jQuery程式碼：

示範：

jQuery取得Table某列的值詳解

相關文章