jQuery - удалить строку таблицы <tr>, нажав <td> - PullRequest
Новая
       19

jQuery - удалить строку таблицы <tr>, нажав <td>

15 голосов
/ 29 мая 2009

Я делаю таблицу, в которую вы можете добавить дополнительные строки. Когда вы добавляете строку, вы можете либо сохранить ее, либо отменить ее, нажав кнопку «Отмена», строка будет удалена. Он работает с одной строкой, но когда я создаю примерно шесть из них и нажимаю кнопку отмены, выбранная строка не будет удалена, но последняя строка будет. Вот мой код пока что. Кто-нибудь знает, что я делаю не так? 

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

  <script type="text/javascript">
  $(document).ready(function() {
  $(".edit").click(function() {
    var id = $(this).attr("id");
    alert("edit "+id);
  });
  $(".delete").click(function() {
    var id = $(this).attr("id");
    alert("delete "+id);
  });
  $("#newbutton").click(function() {
  var randomnumber=Math.floor(Math.random()*100);
    $("tr:last").after("<tr id="+randomnumber+"><td><form><input style='width: 80%'></form></td><td class=ok>OK</td><td id="+randomnumber+" class=cancel>Cancel</td></tr>").ready(function() {
      $("tr td .cancel").click(function() {
        $(this).remove();
      });
      $(".ok").click(function() {
        alert("OK!");
      });
    });
  })
}); 
  </script>
</head>
<table border=1 id=table>
<tr><th>Name</th></tr>
<tr><td>Bombai</td><td id=1 class=edit>edit</td><td id=1 class=delete>delete</td></tr> 
<tr><td>London</td><td id=2 class=edit>edit</td><td id=2 class=delete>delete</td></tr> 
<tr><td>Rom</td><td id=3 class=edit>edit</td><td id=3 class=delete>delete</td></tr> 
</table><label id=newbutton>New Place</label>

Ответы [ 7 ]

17 голосов
/ 29 мая 2009

Поскольку вы динамически добавляете строки в DOM, я предлагаю вам использовать функцию live : 

$("tr td .cancel").live("click", function(){
  $(this).parent("tr:first").remove()
})
9 голосов
/ 08 апреля 2013 
<td><a class="delete" onclick ="delete_user($(this))">Delete</a></td>

в JavaScript 

    function delete_user(row)
    {
        row.closest('tr').remove();


    }
4 голосов
/ 20 мая 2014

вы можете попробовать сделать что-то вроде этого,

Проверьте это Демонстрация Js Fiddle

HTML 

<table border=2>
    <tr>
        <td>jQuery</td>
        <td>mootools</td>
    </tr>
    <tr>
        <td>Dojo</td>
        <td>FUEL</td>
    </tr>
    <tr>
        <td>Raphael</td>
        <td>Rico</td>
    </tr>
    <tr>
        <td>SproutCore</td>
        <td>Lively Kernel</td>
    </tr>
</table>

jQuery: 

$(function() {
   $('tr')
       .find('td')
       .append('<input type="button" value="Delete" class="del"/>')
       .parent()//traversing to 'tr' Element
       .append('<td><input type="button" value="Delete row" class="delrow" /></td>');

    $('.del').click(function() {
       $(this).parent().remove(); //Deleting TD element
    });

    $('.delrow').click(function(){
       $(this).parent().parent().remove(); //Deleting the Row (tr) Element
    });
});
0 голосов
/ 23 апреля 2019

Попробуйте следующий код: 

$(this).closest("tr").remove();
0 голосов
/ 04 февраля 2019

корпус

Добавить строку 

<table border="5px" cellspacing="3px" cellpadding="10px" id="tbl1">
    <thead>
        <tr>
        <td>
            Select
        </td>
        <td>
            column 2
        </td>
        <td>
            column 3
        </td>

    </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="record"></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<br />
<button id="remove">Delete Row</button>

0 голосов
/ 04 февраля 2019

сценарий 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>
    $(document).ready(function () {
        var markup = "<tr><td><input type='checkbox' name='record'></td><td></td><td></td></tr>";
        $("#Add").click(function () {
            $("#tbl1").append(markup);

        });
        $("#remove").click(function () {
            $("table tbody").find('input[name="record"]').each(function () {
                if ($(this).is(":checked")) {
                    $(this).parents("tr").remove();
                }
            });
        });
    }); </script>
0 голосов
/ 29 мая 2009

Вы не ограничиваете свою операцию удаления контекстом добавляемой строки. Попробуйте: 

$(this).find("tr td .cancel").click(...)

Нужно будет сделать то же самое с кнопкой редактирования.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...