简体   繁体   English

在表中单击td时如何获得价值

[英]How to get value when td clicked in table

I have a table with html controls such as a select , etc.. Now when I click on a tag I want to get span value in first td 我有一个HTML控件的表格,例如a select ,等等。现在,当我点击a标签我想span价值first td

And I tried this: 我尝试了这个:

 $('tr > td a').on('click', function(e) { alert($(this).parent().find('td').eq(0).find('span').html()); }); 
 table, tr, td, th { width: 750px; border: 1px solid black; border-collapse: collapse; align: centre } select, a { display: block; } 
 <table> <tr> <th>Name</th> <th>Clicks</th> <th>Clicks2</th> </tr> <tr> <td> <span id="span1">Hi!</span> <a href="#">Save</a> </td> <td style="block"> <a href="#" class="Click" id="click1">Click Me</a> <select> <option>1</option> </select> </td> <td> <a href="#" class="Click" id="click2">Click Me</a> <select> <option>2</option> </select> </td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

Fiddle link 小提琴链接

I tried to show popup only when a is clicked but it is poping up every time td is clicked. 我试图仅在单击a时显示popup窗口,但每次单击td时都会弹出。

So I gave a tag a class Click and tried to achieve the same but couldn't. 所以我给了a标签类Click ,并试图达到相同的,但不能。

How to show popup only when a clicked 如何显示只有当弹出a点击

Your a is display:block so it maintains the whole space of the td . 您的adisplay:block因此它保持了td的整个空间。 Give your a display:inline-block . 给您一个display:inline-block This will let the a take only the space it needs. 这将使a仅占用其所需的空间。 And then your clickhandler will work. 然后您的点击处理程序将起作用。

您还可以在'a'标记内使用javascript函数onclick =“ functionname()”,然后在该函数中编写弹出式代码。

This code 这段代码

$('tr > td a').on("click"...

adds a click handler to the a , then the this inside is the a , so a添加一个点击处理程序,然后其中的thisa ,因此

$(this).parent()

gives the td 给td

followed by 其次是

.find('td')

will try to find a td inside the td , which won't happen 会尝试在td找到一个td ,但不会发生

To get the first td use closest which goes up the parents until if find the target, ie: 要获得第一个td使用closest td ,直到找到目标为止,即上升到父级,即:

$(this).closest('tr').find('td:first').find('span').html()

or 要么

$("td:first > span", $(this).closest('tr')).html()

(or .eq(0) if you don't like :first ) (或.eq(0)如果您不喜欢:first

You could asign a class to the span in your first column, say myClass , like this: 您可以在第一列中为跨度分配一个类,例如myClass ,如下所示:

<table>
    <tr>
        <th>Name </th>
        <th>Clicks</th>
        <th>Clicks2</th>
    </tr>
<tr>
    <td>
        <span class="myClass" id = "span1">Hi!</span>
        <a href="#">Save</a>
    </td>
    <td style="block">
        <a href="#" class="Click" id="click1">Click Me</a>
        <select>
            <option>1</option>
        </select>
    </td>
    <td>
        <a href="#" class="Click" id="click2">Click Me</a>
         <select>
            <option>2</option>
        </select>
    </td>
    </tr>
</table>

,and use jQuery like this: ,并像这样使用jQuery:

 $('td > a').on('click', function (e) {
     alert($(this).parents('tr').find(".myClass").html());
 });

See here 这里

Just change you script from this 只需从此更改您的脚本

$(function(){
    $('tr > td a').on('click', function(e) {
      alert($(this).parent().find('td').eq(0).find('span').html());
    });
}); 

To this 对此

$(function () {
    $('tr > td a').on('click', function (e) {
        alert($(this).parent().find('span').html());
    });
});

Here is a jsFiddle : https://jsfiddle.net/CanvasCode/hdzswrn7/ 这是一个jsFiddle: https ://jsfiddle.net/CanvasCode/hdzswrn7/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM