Выберите tr по id с помощью Jquery - PullRequest
Новая
       21

Выберите tr по id с помощью Jquery

7 голосов
/ 08 апреля 2011

Я пытаюсь выбрать tr внутри таблицы, чтобы удалить его, но мне не везет с селекторами.

Таблица выглядит так: 

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

tr с идентификаторами продукта динамически добавляются с помощью jQuery, поэтому не уверены, что это имеет значение.

deleteProduct(id) функция выглядит так: 

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

При нажатии ничего не происходит, и в консоли Chrome нет ошибок.

Немного возится в консоли:

$('#selectedproducts').html(); Возвращает данные $('#selectedproducts').find('#product_1').html() возвращает пустое

Ответы [ 5 ]

12 голосов
/ 08 апреля 2011

Я бы сделал это так 

<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();
});

другой альтернативой этому селектору будет 

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

альтернативно вы можете удалить элемент с _id, оканчивающимся вот так 

 $('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();
});

Я немного изменил код, вот это ДЕМО

4 голосов
/ 08 апреля 2011

Вам не нужно иметь встроенные onclics, и вам не нужна функция для этого. Все, что вам нужно сделать, это позвонить по номеру this, который относится к элементу, на который вы нажали. В приведенном ниже примере любой элемент, на который вы нажали, будет удален. 

$('td').live('click', function() {
    $(this).parent().remove();
})

Проверьте рабочий пример на http://jsfiddle.net/aswae/2/

Вы также можете вставить кнопку удаления и выбрать, чтобы удалить нажатием кнопки.

Проверьте обновленный пример на http://jsfiddle.net/aswae/4/

3 голосов
/ 08 апреля 2011

Ваша deleteProduct функция принимает аргумент id, но нигде в обработчике onclick этот аргумент не определен.Попробуйте вместо этого:

HTML 

<!-- snip -->
<a onclick="deleteProduct(this)">

JavaScript 

function deleteProduct(elt) {
    $(elt).closest('tr[id]').remove();
}

Демо 1

Как указано в комментариях, у вас также есть немного недопустимой разметки в вашем теге <table>.

Тем не менее, вы используете jQuery, поэтому нетизвините за то, что не пишите ненавязчивый JavaScript .Полностью избавьтесь от атрибутов onclick и используйте это вместо: 

$('#selectedproducts a').live('click', function () {
    $(this).closest('tr[id]').remove();
});

Демо 2

Если вы хотите получить более конкретную информацию о селекторах, это будет работать с текущей разметкой: 

$('#selectedproducts td:last > a').live('click', function () {
    $(this).closest('tr[id]').remove();
});

Демонстрация 3

1 голос
/ 08 апреля 2011

Измените вашу [X] ссылку на что-то вроде: 

<a class="delete">[X]</a>

И ваш jQuery на: 

$(".delete").click(function() {
    $(this).parents("tr").remove();
});
1 голос
/ 08 апреля 2011

Если вы буквально используете deleteProduct(id), вам нужно заменить идентификатор на номер этой строки.

Вы также можете просто прыгнуть на несколько уровней в дереве DOM (удалить родителя родителя) вместо ручного ввода идентификаторов. Я полагаю, что вы могли бы поставить onclick="$(this).parent().parent().remove()" вместо.

...