Vide tous les champs dans une table

Question

J'ai une forme si grande estimée à 170 champs d'entrée, divisés en sous-section par les tables html. Ci-dessous est mon sous-section: -

<table width="90%" border=0 align="center" cellpadding="0" cellspacing="1" > 
    <tr align="center"> 
     <th height="20" colspan="4"> Upgradings/Repair Work 
     <?php if($ResultRow->shipnam != '') echo(" for ".$ResultRow->shipnam);?> 
     </th> 
    </tr> 

    <tr> 
     <td width="15%" height="20" align="right">Date est. start Upgrade : </td> 
     <td height="20" width="30%"> 
     <input name="est_start_upgrade" type="text" id="est_start_upgrade" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['est_start_upgrade']));?>" /> 
     <a href="javascript:est_start_upgrade.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
     </td> 
      <td width="15%" height="20" align="right"> Date est. end Upgrade : </td> 
     <td height="20" width="30%"> 
     <input name="est_end_upgrade" type="text" id="est_end_upgrade" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['est_end_upgrade']));?>" /> 
     <a href="javascript:est_end_upgrade.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
     </td> 
    </tr> 

    <tr> 
     <td height="20" align="right">Date actual start Upgrade : </td> 
     <td height="20" > 
     <input name="act_start_upgrade" type="text" id="act_start_upgrade" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['act_start_upgrade']));?>" /> 
     <a href="javascript:act_start_upgrade.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
     </td> 
      <td height="20" align="right"> Date actual complete Upgrade : </td> 
     <td height="20" > 
     <input name="act_end_upgrade" type="text" id="act_end_upgrade" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['act_end_upgrade']));?>" /> 
     <a href="javascript:act_end_upgrade.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
     </td> 
    </tr>  


    <tr> 
     <td height="20" align="right">Date est. start Repair : </td> 
     <td height="20" > 
     <input name="est_start_repair" type="text" id="est_start_repair" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['est_start_repair']));?>" /> 
     <a href="javascript:est_start_repair.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
     </td> 
      <td height="20" align="right"> Date est. end Repair : </td> 
     <td height="20" > 
     <input name="est_end_repair" type="text" id="est_end_repair" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['est_end_repair']));?>" /> 
     <a href="javascript:est_end_repair.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
     </td> 
    </tr> 

    <tr> 
     <td height="20" align="right">Date actual start Repair : </td> 
     <td height="20" > 
     <input name="act_start_repair" type="text" id="act_start_repair" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['act_start_repair']));?>" /> 
     <a href="javascript:act_start_repair.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
     </td> 
      <td height="20" align="right"> Date actual complete Repair : </td> 
     <td height="20" > 
     <input name="act_end_repair" type="text" id="act_end_repair" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['act_end_repair']));?>" /> 
     <a href="javascript:act_end_repair.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
     </td> 
    </tr>  

    <tr> 
     <td height="20" align="right">Upgrading info : </td> 
     <td height="20" > 
     <input name="upgrading_info" type="text" id="upgrading_info" value="<?php echo(trim($_POST['upgrading_info']));?>" /> &nbsp; 
     </td> 
      <td height="20" align="right">Repair info :</td> 
     <td height="20" > 
     <input name="repair_info" type="text" id="repair_info" value="<?php echo(trim($_POST['repair_info']));?>" /> &nbsp; 
     </td> 
    </tr> 

    <tr> 
     <td height="20" align="right"> Upgrading Builder : </td> 
     <td height="20" > 
       <div id="upgrading_builderdiv" style="display:inline"> 
       <select name="upgrading_builder" id="upgrading_builder" > 
       <option value="">Please Select</option> 
       </select></div> 
     &nbsp; 
     </td> 
      <td height="20" align="right">Upgrading shipyard :</td> 
     <td height="20" > 
      <div id="upgrading_yarddiv" style="display:inline"> 
       <select name="upgrading_yard" id="upgrading_yard" > 
       <option value="">Please Select</option> 
       </select> 
      </div> 
      &nbsp;   
     </td> 
    </tr> 


    <tr> 
     <td height="20" align="right"> Repair Builder : </td> 
     <td height="20" > 
       <div id="repair_builderdiv" style="display:inline"> 
       <select name="repair_builder" id="repair_builder" > 
       <option value="">Please Select</option> 
       </select></div> 
     &nbsp; 
     </td> 
      <td height="20" align="right">Repair shipyard :</td> 
     <td height="20" > 
      <div id="repair_yarddiv" style="display:inline"> 
       <select name="repair_yard" id="repair_yard" > 
       <option value="">Please Select</option> 
       </select> 
      </div> 
      &nbsp;   
     </td> 
    </tr>   
     </table> 

Maintenant, je veux faire tous les champs vides dans cette sous-section après vérification des validations quand soumettre le formulaire.

L'un est que je fais les champs vierges un par un à travers les champs nom ou identifiant, mais ce ne sera pas bon de faire le travail, je cherche le code moins qui font le travail.

Answer 1

Si vous fournissez vos tables id. à vos champs que vous en vouloir pouvez

$('#tableID input[type=text]').val(""); 
$('#tableID input[type=password]').val(""); 
$('#tableID input[type=checkbox]').attr("checked", false); 
$('#tableID input[type=radio]').attr("checked", false); 

si vous avez la liste de sélection, avec la première option comme select avec la valeur 0. vous pouvez alors faire

$('#tableID select').val("0"); 

ou

$('#tableID select').val(('#tableID select option:eq(0)').attr("value")); 

Answer 2

Si vous voulez supprimer le texte de TD, vous pouvez utiliser jquery empty()

$('#tableID td').empty(); // will remove the text 
$('#tableID td').hide(); // will hide the text 

EDIT: Et si vous faites référence à des champs d'entrée -

$('#tableID input[type="text"]').val(""); //will remove values from all input fields 

Answer 3

$('#yourTable input[type="text"]').val(""); 

C'est, sélectionnez toutes les entrées de texte dans la table et définissez leur valeur sur une chaîne vide. Pour inclure des éléments de sélection, en supposant que votre sélectionnez la valeur par défaut des éléments est une chaîne vide comme indiqué dans le code dans la question:

$('#yourTable').find('select,input[type="text"]').val("");