jQueryはテーブル table の td タグを取得します-jsチュートリアル-php.cn

jQueryはテーブル table の td タグを取得します

小云云

リリース： 2017-12-31 15:49:38

オリジナル

1826 人が閲覧しました

この記事ではテーブル内のtdタグを取得するjQueryに関する記事を中心にお届けします（例付きで解説）。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

まず、私が遭遇した問題を紹介します

1. テーブルにタグとタグが含まれている場合、次のように考えられます。 onclick イベントでは、[生成] リンクをクリックして QRUrl のタグと LocalUrl のタグを見つけるだけです

まず、このタグをクリックして jQuery でクリックイベントを実行します。

function build (sender){ var jqSender = $(sender); + +} ここでは、jsオブジェクトを$()でjqueryオブジェクトに変換し、2つの「+」の間に以下の内容を配置します。

var sceneid = jqSender.attr('sceneid'); //attr はオブジェクトの属性の値を見つけることができます

まず td タグを取得する必要があります。一本の線です、これは位置決めと同じです。例: 北京には南京一路があり、成都にも南京一路があります。あなたが私にどこにいるかと尋ねると、私は南京一路にいると答えます。私が北京にいるのか成都にいるのかは確かなので、場所を特定する必要があります。たとえば、私たちが成都の南京路一号にいるとします。

ここで特定の行を取得するには eq() を使用するのが最善です。ページのコードを変更する必要がある場合、これは非常に面倒です。たとえば、私の家の場所を覚えておきたい場合、知っておく必要があるのは通りと家の番号だけです。誰かがここに新しい家を追加した場合にのみわかります。（たとえが少し不適切ですが、コンピュータは非常に厳格です）。

それで、この tr の ID と QRUrl と LocalUrl のクラスを設定します。コードは次のとおりです:

<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>

ログイン後にコピー

次に、jQuery で次のように見つけることができます:

<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>

ログイン後にコピー

td タグは見つかるだけで、使用されません。。

メソッドは次のようになります。要素に「座標」を追加します。なぜそれぞれIDとクラス名なのでしょうか? まず、行がたくさんある場合、それを一意に決定する唯一の方法です。 CSS の管理を容易にするクラスを使用することをお勧めします。注: このエッセイは参考用であり、多くの小さな欠陥があります。最も重要なことは、コードではロジックが最も重要です。