2010-01-18 15 views
6

Sono in grado di nascondere il 'tr' quando si fa clic su 'Rimuovi'. con il seguente codiceCasella di testo vuota con Jquery

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

ma voglio anche per cancellare il contenuto delle caselle di testo 2 (id della casella di testo del sono dinamici [frm_Expense_expensesVO_ __strAmount e frm_Expense_expensesVO_ __memo] qui '*' va da 1 a infinito). Per favore aiuto. Grazie

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

risposta

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

Nota: vedere anche darmen's answer sul motivo per cui il selettore a#minus non funziona, se lo desideri.

+0

Quasi identico, ma mi hai battuto per 24 secondi, quindi concedo e cancellerò la mia risposta. :) – Alconja

+0

perché non solo '$ ('a # meno'). Click (function() {....'? C'è un vantaggio nell'uso di 'bind()'? – carillonator

+1

click è solo un metodo di supporto, quindi è identico al bind call, ma non mi preoccuperei troppo di salvare alcuni caratteri. Non c'è molto da guadagnare lì. – Anurag

0

Utilizzare l'attributo class e selezionare le due caselle di testo utilizzando tale className. Quindi è possibile impostare il valore di tale raccolta sulla stringa nulla.

7

È necessario specificare una classe per le ancore. Il binding su un singolo ID genererà un evento per l'ultimo.

Esempio:

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

Grazie mille ragazzi :) –

+0

+1. Non me ne sono accorto. Aggiungerò una nota nel mio post. –

0

è più vicino definito nucleo jQuery o di un plugin?

In ogni caso, è possibile ottenere tutte le caselle di testo all'interno di tr e quindi eseguire una corrispondenza regolare. Questo dovrebbe solo svuotare le caselle di testo che corrispondono all'id menzionato nella tua domanda.

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

'closest()' è in jQuery core 1.3 in poi - http://docs.jquery.com/Traversing/closest –

Problemi correlati