在表中單擊td時如何獲得價值

Question

我有一個HTML控件的表格，例如a select ，等等。現在，當我點擊a標簽我想span價值first td

我嘗試了這個：

 $('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> 

小提琴鏈接

我試圖僅在單擊a時顯示popup窗口，但每次單擊td時都會彈出。

所以我給了a標簽類Click ，並試圖達到相同的，但不能。

如何顯示只有當彈出a點擊

Answer 1

您的a是display:block因此它保持了td的整個空間。 給您一個display:inline-block 。 這將使a僅占用其所需的空間。 然后您的點擊處理程序將起作用。

Answer 2

您還可以在'a'標記內使用javascript函數onclick =“ functionname（）”，然后在該函數中編寫彈出式代碼。

Answer 3

這段代碼

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

向a添加一個點擊處理程序，然后其中的this是a ，因此

$(this).parent()

給td

其次是

.find('td')

會嘗試在td找到一個td ，但不會發生

要獲得第一個td使用closest td ，直到找到目標為止，即上升到父級，即：

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

要么

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

（或.eq(0)如果您不喜歡:first ）

Answer 4

您可以在第一列中為跨度分配一個類，例如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>

，並像這樣使用jQuery：

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

看這里

Answer 5

只需從此更改您的腳本

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

對此

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

這是一個jsFiddle： https ://jsfiddle.net/CanvasCode/hdzswrn7/