使用Jquery选择tr by id [英] Select tr by id with Jquery

问题描述

我正在尝试在表格中选择一个tr来删除它但是选择器没有运气。

I'm trying select a tr inside a table to delete it but am not having any luck with selectors.

表格如下所示：

<table width="301" border="0" cellspacing="5" cellpadding="0" id="selectedproducts" =="">
      <tbody>
        <tr>
          <th width="56" scope="col">Product:</th>
          <th width="48" scope="col">Size:</th>
          <th width="71" scope="col">Colour:</th>
          <th width="41" scope="col">Qty</th>
          <th width="55" scope="col">Price</th>
          <th width="55" scope="col">Delete</th>
        </tr>
        <tr id="product_1">
          <td>Shuttle</td>
          <td>54.95</td>
          <td>Red</td>
          <td>1</td>
          <td></td>
          <td><a onclick="deleteProduct(id)">[X]</a></td>
        </tr>
        <tr id="product_2">
          <td>Shuttle</td>
          <td>54.95</td>
          <td>Red</td>
          <td>1</td>
          <td></td>
          <td><a onclick="deleteProduct(id)">[X]</a></td>
        </tr>
      </tbody>
 </table>

带有产品ID的tr动态附加jQuery，因此不确定是否会产生影响。

The tr's with product id's are dynamically appended with jQuery so not sure if that makes a difference.

deleteProduct（id）函数如下所示：

function deleteProduct(id) {
 $('#product_' + id).remove();
}

点击后没有任何反应，Chrome控制台中没有错误。

When clicked nothing happens and there are no errors in the Chrome console.

在控制台中捣乱：

$（'＃selectedproducts'）。 html（）; 返回数据
$（'＃selectedproducts'）。find（'＃product_1'）。html（）返回空

推荐答案

我会这样做

<table width="301" border="0" cellspacing="5" cellpadding="0" id="selectedproducts" =="">
      <tbody>
        <tr>
          <th width="56" scope="col">Product:</th>
          <th width="48" scope="col">Size:</th>
          <th width="71" scope="col">Colour:</th>
          <th width="41" scope="col">Qty</th>
          <th width="55" scope="col">Price</th>
          <th width="55" scope="col">Delete</th>
        </tr>
        <tr id="product_1">
          <td>Shuttle</td>
          <td>54.95</td>
          <td>Red</td>
          <td>1</td>
          <td></td>
          <td><a>[X]</a></td>
        </tr>
        <tr id="product_2">
          <td>Shuttle</td>
          <td>54.95</td>
          <td>Red</td>
          <td>1</td>
          <td></td>
          <td><a>[X]</a></td>
        </tr>
      </tbody>
 </table>

和jQuery：

$('tr a').live('click', function () {
    $(this).closest('tr').remove();
});

此选择器的另一种选择是

another alternative to this selector would be

 $('tr[id^="product_"] a').live('click', function () {
    // you could ge the id number from the tr to do other things with 
    var id = $(this).closest('tr').attr('id').replace("product_","");

    $(this).closest('tr').remove();
});

这会将其限制为仅以product _开头的那个

this would restrict it to only tr that whose id starts with "product_"

或者你可以删除带有_id结尾的项目

alternately you could delete item with an _id ending like this

 $('tr[id^="product_"] a').live('click', function () {
    // you could ge the id number from the tr 
    var id = $(this).closest('tr').attr('id').replace("product_","");
    //then you could remove anything the that ends with _id 
    $('[id$="_'+id+'"]').remove();
});

我稍微改了一下代码是 DEMO

I changed the code slightly here is a DEMO

这篇关于使用Jquery选择tr by id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！