javascript - 清空表格中的所有字段

Question

我有这么大的表格，估计有 170 个输入字段，按 html 表格分成小节。以下是我的一个小节：-

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

现在我想在提交表单时检查一些验证后将此子部分中的所有字段都留空。

一种是我通过字段名称或ID将字段逐个空白，但是这样做并不好，我正在寻找可以完成这项工作的更少代码。

Answer 1

如果要从 TD 中删除文本，可以使用 jqueryempty()

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

编辑：如果您指的是输入字段 -

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

Answer 2

如果您提供表格 ID。怨恨你的领域，你可以试试

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

如果你有选择列表，第一个选项，比如值为 0 的选择。那么你可以做

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

或者

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

Answer 3

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

也就是说，选择表中的所有文本输入并将其值设置为空字符串。要包含选择元素，假设您的选择元素的默认值为空字符串，如问题中的代码所示：

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