2010-01-18 7 views
6

Я могу скрыть «tr», когда нажата кнопка «Удалить». со следующим кодом.Пустой текстовый ящик с использованием JQuery

$("a#minus").bind("click", function(e){ 
    $(this).closest('tr').hide(); 
}); 

Но я также хочу, чтобы очистить содержимое 2 текстовых полей (идентификатор текстового поля является динамическим [frm_Expense_expensesVO_ __strAmount и frm_Expense_expensesVO_ __memo] здесь «*» идет от 1 до бесконечности). Пожалуйста помоги. Благодаря

<table> 
<tr> 
    <td> 
     Amount 
    </td> 
    <td> 
     Memo 
    </td> 
    <td>  
     &nbsp; 
    </td> 
</tr> 
<tr> 
    <td> 
     <input type="text" name="expensesVO[0].strAmount" value="2.30" id="frm_Expense_expensesVO_0__strAmount"/> 
    </td> 
    <td> 
     <input type="text" name="expensesVO[0].memo" value="Five" id="frm_Expense_expensesVO_0__memo"/> 
    </td> 
    <td> 
     <a id="minus" href="#">Remove</a> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input type="text" name="expensesVO[1].strAmount" value="3.45" id="frm_Expense_expensesVO_1__strAmount"/> 
    </td> 
    <td> 
     <input type="text" name="expensesVO[1].memo" value="Six" id="frm_Expense_expensesVO_1__memo"/> 
    </td> 
    <td> 
     <a id="minus" href="#">Remove</a> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input type="text" name="expensesVO[2].strAmount" value="" id="frm_Expense_expensesVO_2__strAmount"/> 
    </td> 
    <td> 
     <input type="text" name="expensesVO[2].memo" value="" id="frm_Expense_expensesVO_2__memo"/> 
    </td> 
    <td> 
     <input type="submit" id="frm_Expense_ExpenseAdd_plus" name="action:ExpenseAdd_plus" value="+"/> 
    </td> 
</tr> 
<tr> 
    <td>  
     <label id="frm_Expense_transactionVO_amount">5.75</label> 
    </td> 
    <td align="right"> 
     <input type="submit" id="frm_Expense_Cancel" name="action:ExpenseAdd_cancel" value="Cancel"/> 
    </td> 
    <td align="left"> 
     <input type="submit" id="frm_Expense_Save" name="action:ExpenseAdd_save" value="Save"/> 
    </td> 
</tr> 

ответ

16
$("a#minus").bind("click", function(e){ 
    $(this).closest('tr').hide().find('input:text').val(''); 
}); 

Примечание: Также см darmen's answer о том, почему селектор a#minus не будет работать, как хотелось бы.

+0

Почти идентичный, но вы избили меня на 24 секунды, поэтому я уступаю и удалю свой ответ. :) – Alconja

+0

Почему не просто '$ ('a # минус'). Click (function() {....'? Есть ли преимущество в использовании 'bind()'? – carillonator

+1

click - это просто вспомогательный метод, так что это идентичный вызову bind, но я бы не стал слишком беспокоиться о сохранении нескольких символов. Не так много можно получить там. – Anurag

0

Используйте атрибут class и выберите два текстовых поля, используя className. Затем вы можете установить значение этой коллекции в нуль-строку.

7

Вы должны указать класс для якорей. Привязка к одному id приведет к событию для последнего.

Пример:

$("a.remove").live('click', function(){ 
    $(this).closest('tr').hide().find("input").val(""); 
}); 
+0

Спасибо, что так много парней :) –

+0

+1. Я этого не заметил. Я добавлю заметку в свой пост. –

0

ближе всего определено в ядре или JQuery плагин?

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

$("a#minus").bind("click", function(e){ 
    var row = $(this).closest('tr'); 
    $("input:text", row).each(function(item) { 
     var id = item.id; 
     if(/frm_Expense_expensesVO_[0-9]+__strAmount/.test(id)) { 
      $(item).val(''); 
     } 
     else if(/frm_Expense_expensesVO_[0-9]+__memo/.test(id)) { 
      $(item).val(''); 
     } 
    }); 
    row.hide(); 
}); 
+0

'ближайший()' находится в ядре jQuery 1.3 и далее - http://docs.jquery.com/Traversing/closest –

Смежные вопросы