jQuery는 테이블 테이블에서 td 태그를 가져옵니다.-JS 튜토리얼-php.cn

jQuery는 테이블 테이블에서 td 태그를 가져옵니다.

小云云

풀어 주다： 2017-12-31 15:49:38

원래의

1825명이 탐색했습니다.

이 글은 주로 테이블에서 td 태그를 얻기 위한 jQuery에 대한 글을 제공합니다(예제 설명). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

먼저 제가 겪은 문제를 소개하겠습니다

1. 테이블에 태그와 태그가 포함된 경우 대략적으로 다음과 같이 생각할 수 있습니다.

<tr>
    <td>
      @scene.ID
    </td>
    <td>
      @scene.SceneName
    </td>
    <td>
      @scene.QRUrl
    </td>
    <td>
      @scene.LocalUrl
    </td>
    <td>
      <!--如果有图片，展示图片，没有图片生成图片-->
      <!--判断localUrl（本地服务器路径）是否为空，如果为空，表示没有生成，如果不为空表示已经生成-->
      @if (!string.IsNullOrWhiteSpace(scene.LocalUrl))
      {
        <!--图片不为空，展示图片地址-->
        <img src="@scene.LocalUrl" style="width:200px; height:100px"/>
      }
      else
      {
        <!--图片为空，生成图片-->
        <a sceneid="@scene.ID" href="#" rel="external nofollow" rel="external nofollow" onclick="build(this);">生成</a>
      }
    </td>
</tr>

로그인 후 복사

2. onclick 이벤트에서 해야 할 일은 "생성" 링크를 클릭하여 QRUrl의 태그와 LocalUrl

태그를 클릭하여 jQuery에서 클릭 이벤트를 실행하는 것뿐입니다.

function build (sender){ var jqSender = $(sender); + +} 여기서 js 객체는 $()를 통해 jquery 객체로 변환되며, 두 개의 "+" 사이에 다음 내용이 배치됩니다.

var sceneid = jqSender.attr('sceneid'); //attr은 객체 속성의 값을 찾을 수 있습니다. 여기서 우리는 sceneid 속성의 값을 찾습니다.

먼저 td 태그를 가져와야 합니다. One Line이므로 위치 지정과 동일합니다. 예를 들어 베이징에는 난징 1번 도로가 있고, 청두에는 난징 1번 도로가 있습니다. 제가 어디에 있는지 물어보면 난징 1번 도로에 있다고 말할 수 있습니다. 내가 베이징에 있는지 청두에 있는지 확인하려면 청두의 No. 1 Nanjing Road에 있다고 가정해 보겠습니다.

여기에서 특정 행을 가져오려면 eq()를 사용하는 것이 가장 좋습니다. 페이지 코드를 수정해야 하는 경우 이는 매우 번거로운 일입니다. 예를 들어 내 집이 어디에 있는지 기억하고 싶다면 거리와 집 번호만 알면 되는데, 이 거리의 첫 번째 집이 여기에 다른 사람이 새 집을 추가하면 내 집이라는 것만 알 수 있다. (비유는 약간 부적절하지만 컴퓨터는 매우 엄격합니다).

그래서 우리는 이 tr에 대한 ID와 QRUrl 및 LocalUrl에 대한 클래스를 설정했습니다. 코드는 다음과 같습니다.

<tr sceneid="@scene.ID">
    <td>
      @scene.ID
    </td>
    <td>
      @scene.SceneName
    </td>
    <td class="wxurl-col">
      @scene.QRUrl
    </td>
    <td class="localurl-col">
      @scene.LocalUrl
    </td>
    <td>
      <!--如果有图片，展示图片，没有图片生成图片-->
      <!--判断localUrl（本地服务器路径）是否为空，如果为空，表示没有生成，如果不为空表示已经生成-->
      @if (!string.IsNullOrWhiteSpace(scene.LocalUrl))
      {
        <!--图片不为空，展示图片地址-->
        <img src="@scene.LocalUrl" style="width:200px; height:100px"/>
      }
      else
      {
        <!--图片为空，生成图片-->
        <a sceneid="@scene.ID" href="#" rel="external nofollow" rel="external nofollow" onclick="build(this);">生成</a>
      }
    </td>
  </tr>

로그인 후 복사

그러면 jQuery에서 다음과 같이 찾을 수 있습니다.

<script type="text/javascript">
  function build(sender) {
    var jqSender = $(sender);
    var sceneid = jqSender.attr('sceneid');

    //找到指定行类名为wxurl-col的td标签
    $('tbody tr[sceneid=' + sceneid + '] td.wxurl-col')

    //找到指定行类名为localurl-col的td标签
    $('tbody tr[sceneid=' + sceneid + '] td.localurl-col')

    //找到点击事件的a标签
    jqSender

}
</script>

로그인 후 복사

td 태그는 발견되기만 하고 사용되지는 않습니다. .

방법은 이렇습니다. 요소에 "좌표"를 추가하는 이유는 무엇입니까? 우선 행이 많을 때 ID를 추가하는 것이 유일한 방법입니다. 결정된 경우 열은 id 또는 class를 사용하는 것이 좋습니다. 이는 CSS 관리를 용이하게 합니다.

참고: 이 에세이는 참고용일 뿐이며 가장 중요한 것은 작은 결함이 아닙니다. 코드는 논리가 가장 중요합니다.