Detailed explanation of how jQuery obtains the td tag in the table-JS Tutorial-php.cn

Detailed explanation of how jQuery obtains the td tag in the table

黄舟

Release： 2017-07-27 16:23:25

Original

1414 people have browsed it

First of all, let me introduce the problems I encountered

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

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

Copy after login

2. There is an onclick event here. All I have to do is click the "Generate" link to find the tag of QRUrl and the tag of LocalUrl

First we click this a tag, execute the click event in jQuery

function build(sender){ var jqSender = $(sender); + +} 这里把js对象通过 $()转变成了jquery对象，下面的内容放在两个“+”之间。
var sceneid = jqSender.attr(&#39;sceneid&#39;); //attr可以找到对象的属性的值，这里我们找到了sceneid这个属性的值

Copy after login

I need to get the td tag. First, I should know which row it is in. This 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="#" onclick="build(this);">生成</a>
            }        </td>
    </tr>

Copy after login

Then you can find it in jQuery like this:

<script type="text/javascript">    
function build(sender) {        
var jqSender = $(sender);        
var sceneid = jqSender.attr(&#39;sceneid&#39;);        
//找到指定行类名为wxurl-col的td标签
        $(&#39;tbody tr[sceneid=&#39; + sceneid + &#39;] td.wxurl-col&#39;)        
        //找到指定行类名为localurl-col的td标签
        $(&#39;tbody tr[sceneid=&#39; + sceneid + &#39;] td.localurl-col&#39;)        
        //找到点击事件的a标签       
        jqSender

}</script>

Copy after login

## 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 id. It can also be class. It is recommended to use class to facilitate our CSS management

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