jQuery gets td tag in table table

This article mainly brings you an article on jQuery to obtain the td tag in the table table (explanation with examples). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

First of all, let me introduce the problems I encountered

1. When a table contains tags and tags, it can be roughly considered as follows:

<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. There is an onclick event here. All I have to do is click the "Generate" link and find the tag of QRUrl and the tag of LocalUrl

First We click on this a tag to execute the click event in jQuery

function build(sender){ var jqSender = $(sender); + +} Here the js object is converted into a jquery object through $(), as follows The content is placed between two "+".

var sceneid = jqSender.attr('sceneid'); //attr can find the value of the object's attribute. Here we find the value of the sceneid attribute.

I need to get the td tag , first I should know which row it is in, which is the same as positioning. For example: There is a No. 1 Nanjing Road in Beijing, and there is a No. 1 Nanjing Road in Chengdu. You ask me where I am, and I tell you that I am at No. 1 Nanjing Road. Can you be sure whether I am in Beijing or Chengdu, so we should To locate, say we are at No. 1 Nanjing Road, Chengdu.

It is best to use eq() to get a certain row here. If the page code needs to be modified, this will be very troublesome. For example, if you want to remember where my house is, what you need to know is the street and house number. You only know that the first house on this street is my house. If someone else adds a new house here, it will not be the first house. (The analogy is a little inappropriate, but computers are so rigid).

So, we set an id for this tr and a class for QRUrl and LocalUrl. The code is as follows:

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

Then you can find it in jQuery like this:

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

## The #td tag is only found but not used.

The method is like this, add "coordinates" to the element, why are they id and class name respectively? First of all, there are many rows. The only way to uniquely determine it is to add id. When the row is determined, the column can be either id or class, it is recommended to use class to facilitate the management of our CSS

Note: This essay is for reference only, and there are many small flaws. The most important thing is not the code, the logic is the most important.

Related recommendations:

Detailed explanation of jQuery implementation to obtain the row number and column number of the mouse click position in the table

How to obtain the table in JavaScript The value of a certain column

Implementation code for using jQuery to obtain the row id and td value in the table_jquery

The above is the detailed content of jQuery gets td tag in table table. For more information, please follow other related articles on the PHP Chinese website!