집 > 기사 > 웹 프론트엔드 > 테이블의 특정 열 값을 가져오는 jQuery에 대한 자세한 설명

테이블의 특정 열 값을 가져오는 jQuery에 대한 자세한 설명

小云云원래의: 2018-01-23 16:01:224202검색

이 글은 주로 테이블의 특정 열의 값을 얻기 위해 jQuery를 소개합니다. 매우 훌륭하고 참조 값이 있습니다. 필요한 친구가 모두 참고할 수 있기를 바랍니다.

하지만 이 글의 내용과는 전혀 다릅니다. Insus.NET에 필요한 것은 html 테이블의 특정 행과 열의 데이터를 가져오는 jQuery입니다.

다음 테이블:

Html 코드:

<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은 여전히 스타일 클래스를 사용하여 다음을 구현하는 데 익숙합니다.

예를 들어 "비용 설명" 열의 값을 얻으려면 이 열에 클래스를 추가하세요.

jQuery 코드:

데모:

테이블의 특정 열 값을 가져오는 jQuery에 대한 자세한 설명

관련 기사