JQuery удалить текущую строку, ранее добавленную - PullRequest
Новая
       10

JQuery удалить текущую строку, ранее добавленную

0 голосов
/ 05 марта 2010

Как я могу удалить строку из таблицы, которая была создана ранее с помощью кнопки удаления?

Мне нужно добавить событие в btnDeleteOther, чтобы удалить текущую выбранную строку.Мне также нужно знать, как изменить идентификатор для каждого созданного текстового поля, и заполнить значение текстового поля переменной, поступающей в функцию (но, наверное, мне придется задать это в другом вопросе).Пример кода: 

<html>
<head>
<script type="text/javascript">
   function createNewRow (text1,text2){
    $(document).ready(function(){
    $('#tblOtherParties > tbody').append('<tr><td>
    <input type="text" id="title1" value=""/>
           </td><td>
       <input type="text" id="title2"/>
       </td><td>
       <input type="button" id="btnDeleteOther" value="X"/>
       </td></tr>');
    });
     }
</script>
</head>
<body>
<table style="float:left" id="tblOtherParties">
  <thead>
     <tr>
     <th>Title1</th>
     <th>Title2</th>
     <th>
      <input type="button" id="btnAddOther" title="Add" value="Add" onclick="javascript:createNewRow();"/>
     </th>
    </tr>
       </thead>
      <tbody>
         <tr>
           <td>
        <input type="text" id="title1"/>
           </td>
           <td>
        <input type="text" id="title2"/>
           </td>
           <td>
        <input type="button" id="btnDeleteOther" value="X"/>
           </td>
         </tr>
      </tbody>
    </table>
</body>
</html>

Ответы [ 6 ]

3 голосов
/ 05 марта 2010

Поскольку у вас может быть несколько кнопок «Удалить», они должны идентифицироваться именем класса, а не идентификатором. (например, <input type="button" class="DeleteButton" value="X"/>)

Затем вы можете написать следующее: 

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

РЕДАКТИРОВАТЬ : чтобы предотвратить удаление последней строки, вы можете написать 

    $(this).closest('tr').not(':only-child').remove();

Чтобы заполнить текстовые поля, вы можете написать следующее: (Обратите внимание, что для них также нужны имена классов вместо идентификаторов) 

var newRow = $('<tr>...</tr>');
newRow.find('.Title1').val(title1);
newRow.find('.Title2').val(title2);
newRow.appendTo($('#tblOtherParties > tbody'));
2 голосов
/ 05 марта 2010 
$("#btnDeleteOther").live("click", function(){
  $(this).closest("tr").remove();
});
1 голос
/ 05 марта 2010

У вас есть проблемы, помимо удаления вашей строки.

Это: 

   function createNewRow (text1,text2){ 
    $(document).ready(function(){ 
    $('#tblOtherParties > tbody').append('<tr><td> 
    <input type="text" id="title1" value=""/> 
           </td><td> 
       <input type="text" id="title2"/> 
       </td><td> 
       <input type="button" id="btnDeleteOther" value="X"/> 
       </td></tr>'); 
    }); 
     }

было бы лучше записать как: 

function createNewRow (text1,text2){ 
    $('#tblOtherParties > tbody').append('<tr><td> 
    <input type="text" class="title1" value=""/> 
           </td><td> 
       <input type="text" class="title2"/> 
       </td><td> 
       <input type="button" class="btnDeleteOther" value="X"/> 
       </td></tr>'); 
     };

и что касается 

  <input type="button" id="btnAddOther" title="Add" value="Add" onclick="javascript:createNewRow();"/>

убери это с 

  <input type="button" id="btnAddOther" title="Add" value="Add" >

Затем используйте jQuery для поведения, которое вы хотите 

$(document).ready(function(){
    $('.btnDeleteOther').live('click', function() {  
        if ($('.btnDeleteOther').length > 1)
        {
           $(this).closest('tr').remove();               
        }; //added this based on comments to other answer- always leaves one row in
    }); 
    $('#btnAddOther').click(function()
    { 
       createNewRow();
    });
});

РЕДАКТИРОВАТЬ: ОГРОМНОЕ предположение с моей стороны, вы можете передать текст на входы, когда вы добавляете строку, поскольку у вас есть (text1, text2) там ...

Чтобы сделать это, вам нужен источник этого, тогда вы можете сделать это с помощью: 

var mytext1 = "default stuff for 1";
var mytext2 = "default stuff for 2";

function createNewRow (){ 
        $('#tblOtherParties > tbody').append('<tr><td> 
        <input type="text" class="title1" value=""/> 
               </td><td> 
           <input type="text" class="title2"/> 
           </td><td> 
           <input type="button" class="btnDeleteOther" value="X"/> 
           </td></tr>'); 
           $('tr:last').find('.title1').val(mytext1);
           $('tr:last').find('.title2').val(mytext2);
        };
1 голос
/ 05 марта 2010

Для старых jQuery вы можете сделать 

$("#btnDeleteOther").click(function() {
    $(this).parents("tr").remove();
});

Также для изменения идентификатора текстового поля вы можете сделать следующее при введении 

var content = $("<CONTENT>");
content.find("#title2").attr("id", "title" + something);
$('#tblOtherParties > tbody').append(content);
1 голос
/ 05 марта 2010

Вы должны присвоить кнопке удаления либо уникальный идентификатор для строки, либо класса, а не назначать ей фиксированный идентификатор. Идентификаторы элементов в HTML должны быть уникальными. Я бы предложил дать ему класс, а затем применить живой селектор на основе классов, как предлагает @Jonathan. Как указывает @Mark, то же самое относится и к вашим текстовым полям. В моем примере я изменил его, чтобы использовать имена вместо идентификаторов, но, возможно, они также должны быть уникальными. Отрегулируйте по мере необходимости в соответствии с вашей ситуацией. 

$(function() {
   $('.deleteButton').live( 'click', function() {
       $(this).closest('tr').remove();
   });
});
function createNewRow (text1,text2){ 
    $(document).ready(function(){ 
    $('#tblOtherParties > tbody').append('<tr><td>' +
       + ' <input type="text" name="title1" value=""/>'
       + '</td><td>'
       + '<input type="text" name="title2"/>'
       + '</td><td>'
       + '<input type="button" class="deleteButton" value="X"/>'
       + '</td></tr>'); 
    }); 
}
0 голосов
/ 05 марта 2010

Кажется, что вы добавляете элемент с id = "btnDeleteOther".Таким образом, кажется, что вы можете иметь более одного элемента с одинаковым идентификатором.Вы должны присвоить добавленному (ым) уникальному идентификатору (вести учет / добавить метку времени и т. Д.).

Присоединить событие click к кнопке, а затем вызвать remove на tr.используя что-то вроде: $ (this) .closest ('tr'). hide ();

Кроме того, поскольку вы будете добавлять новые элементы, вы, вероятно, захотите заглянуть в .live (), чтобы новые элементы получали событие click.

...