2009-09-13 2 views
0

У меня проблемы с удалением строки из таблицы. У меня есть 2 таблицы, которые требуют от меня удалить X количество строк, поэтому я использовал jquery.each, и в каждом цикле я просто пошел $ (value) .remove(), и он работает.Как удалить строку таблицы с jquery?

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

('#MyTable tbody tr td img:even').click(function() 
{ 
    // check if they are sure if they want to delete. If true go on 

    // now get this row they clicked on 
    var row = $('#MyTable tbody tr td img:even').parents('tr'); 

    // do some ajax stuff 
    $(row).remove(); 
}); 

Поэтому я думал, что это сработает, так как оно похоже на то, что я сделал с циклом jquery. Я проверил, что находится в «строке», делая предупреждение ($ (строка) .html());

Это создает строку, о которой я хочу удалить. Я сделал то же самое, что и «value» в jquery каждый цикл (таблица у меня есть). Он также содержит строку, о которой идет речь, для удаления.

Так что для меня эти обе те же, поскольку они оба выплевывают строку таблицы. Но работает в цикле jquery.

Где находится «рядовой» способ. Что происходит, так это удаление всех строк в таблице.

Я не понимаю, почему ..

Благодаря

Редактировать здесь таблица. Я думаю, что это JQuery оповещения плагин, который убивает «этот»

здесь http://abeautifulsite.net/notebook/87

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     #popup_container 
     { 
      font-family: Arial, sans-serif; 
      font-size: 12px; 
      min-width: 300px; /* Dialog will be no smaller than this */ 
      max-width: 600px; /* Dialog will wrap after this width */ 
      background: #FFF; 
      border: solid 5px #999; 
      color: #000; 
      -moz-border-radius: 5px; 
      -webkit-border-radius: 5px; 
      border-radius: 5px; 
     } 
     #popup_title 
     { 
      font-size: 14px; 
      font-weight: bold; 
      text-align: center; 
      line-height: 1.75em; 
      color: #666; 
      background: #CCC url(Images/Alerts/title.gif) top repeat-x; 
      border: solid 1px #FFF; 
      border-bottom: solid 1px #999; 
      cursor: default; 
      padding: 0em; 
      margin: 0em; 
     } 
     #popup_content 
     { 
      background: 16px 16px no-repeat url(Images/Alerts/info.gif); 
      padding: 1em 1.75em; 
      margin: 0em; 
     } 
     #popup_content.alert 
     { 
      background-image: url(Images/Alerts/info.gif); 
     } 
     #popup_content.confirm 
     { 
      background-image: url(Images/Alerts/important.gif); 
     } 
     #popup_content.prompt 
     { 
      background-image: url(Alerts/help.gif); 
     } 
     #popup_message 
     { 
      padding-left: 48px; 
     } 
     #popup_panel 
     { 
      text-align: center; 
      margin: 1em 0em 0em 1em; 
     } 
     #popup_prompt 
     { 
      margin: .5em 0em; 
     } 
    </style> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

    <script type="text/javascript" src="../../Scripts/jquery.alerts.js"></script> 

</head> 
<body> 
    <table class="class" id="MyTable"> 
     <thead> 
      <tr> 
       <th> 
       </th> 
       <th> 
        Header 1 
       </th> 
       <th> 
        Header 2 
       </th> 
       <th> 
        Header 3 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        <a> 
         <img alt="" src="img1">a</a><a><img alt="" src="img2">b</a> 
       </td> 
       <td> 
        1 
       </td> 
       <td> 
        2 
       </td> 
       <td> 
        3 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <a> 
         <img alt="" src="img1"></a>c<a><img alt="" src="img2">d</a> 
       </td> 
       <td> 
        4 
       </td> 
       <td> 
        5 
       </td> 
       <td> 
        6 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html> 

<script type="text/javascript"> 
    $(document).ready(function() 
    { 

     $('#MyTable tbody tr td a:odd').live("click", function() 
     { 
      jConfirm('Do you wish to delete?.', 'Deletion', function(d) 
      { 
       if (d == true) 
       { 
        var row = $(this).parents('tr'); 
        // can maybe omit this. Problem might be with jConfirm. 
        $.post("Test", null, function(r) 
        { 

         row.remove(); 
        }); 
       } 
      }); 

     }); 
    }); 
</script> 

Вот контроллер (я использую ASP.NET MVC, но вы можете переключиться на то, что, так как я не» что серверная сторона вызовет проблему).

// В том же контроллере. В Index View есть все вышеперечисленное html. Тест - это то, что называется.

public ActionResult Index() 
     { 
      return View(); 
     } 
     public ContentResult Test() 
     { 
      return Content("hi"); 
     } 
+0

row.remove() удаляет все строки в таблице, потому что вы вызываете удалить на множестве всех т.р. родителей даже Img элементов, и а не на одной таблице, как вы ожидаете.Используйте это ключевое слово вместо нуля на конкретном img, который активировал событие click, как описано TheVillageIdiot и в моих собственных ответах. –

+0

, где, как я уже говорил, я получаю нулевую ссылку. То, что вы говорите, имеет смысл, поскольку я действительно удивлен тем, что у меня есть работы. Например, когда я смотрел на нее, мне было интересно, почему это только один ряд, а не все. Но когда я распечатываю html, он содержит только одну строку. Почему он показывает только одну строку? – chobo2

+0

Спасибо за добавление HTML. если вы измените строку var row = ... на var row = $ (this) .parents ('tr'), у вас должны быть лучшие результаты. В этой операции вы собираете более одной строки таблицы. –

ответ

0

Вы можете использовать функции DOM, чтобы удалить строки таблицы, например:

var row = $('#MyTable tbody tr td img:even').parents('tr'); 
var parentTableDOMElement = row.parents("table:first")[0]; 
parentTableDOMElement.deleteRow(row[0].rowIndex); 

Обратите внимание, что функция родители должны возвращать JQuery обернутый набор, поэтому нет необходимости обертывать его снова, используя код типа $ (строка).

Полагаю, я понимаю, почему вы получаете переменные нулевой строки. Вы не удаляете одну строку за раз. Скорее, для каждого щелчка вы находите все элементы img, которые соответствуют селектору, и для каждого из них удаляют их родительские таблицы строк всего за один снимок.

+0

Извините, я не понимаю этого. поэтому строка получает эту строку. После этого я потерялся. – chobo2

+0

Вторая строка, присваивающая parentTableDOMElement, получает непосредственный элемент таблицы parent из строки. Синтаксис [0] извлекает базовый элемент DOM в отличие от набора завершенных jQuery, которые вы используете в другом месте кода. С элементом DOM в руке вы вызываете deleteRow, используя rowIndex базового элемента DOM строки. –

1

попробовать:

var row = $(this).parents('tr');//use this to get current row 

// do some ajax stuff 
$(row).remove(); 
+1

Я думаю, что row.remove() будет достаточно. строка уже завернутая. –

+0

ya Я пытался это сделать, но. Он возвращает «null». Я понял, что это происходит из-за того, что он проходит через плагин предупреждения jquery и, возможно, «это» относится к этому. – chobo2

+0

это относится к элементам img, сопоставляемым селектором '#MyTable tbody tr td img: even'. –

0

Попробуйте использовать следующий базовый HTML и посмотреть, удалена ли вторая строка. Это должно убедить вас, что row.remove() действительно работает и что, возможно, что-то еще не работает.

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Test bed</title> 
</head> 
<body> 
    <table> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr id="test"> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
    </table> 
</body> 
</html> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready 
(
    function() 
    { 
    $("tr#test").remove(); 
    } 
); 
</script> 
0

Попробуйте использовать «ближайший» Tr:

('#MyTable tbody tr td img:even').click(function() 
{ 
    // check if they are sure if they want to delete. If true go on 

    // now get this row they clicked on 
    var row = $(this).closest('tr'); 

    // do some ajax stuff 
    $(row).remove(); 
}); 
Смежные вопросы