Use jquery to get the td tag in the table

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:

<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="#" 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 the a tag to execute the click event in jQuery

function build(sender){ var jqSender = $(sender); + +} Here the js object is transformed through $() It becomes a jquery object, and the following content is placed between the 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 on. 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>

Then you can do this in jQuery I went to find:

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

td tag. I just found it but didn’t use it.

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 article is for reference only, and there are many small flaws. The most important thing is not the code, the logic is the most important .

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