Question

我在表格内部有以下结构，该表格包含行以及嵌套在#tbody_name中的其他表格。

<tbody id="tbody_name">
    <tr>
        <td>
             <select>
                <option value="" selected="selected">---------</option>
                <option value="3">Something</option>
                <option value="2">Something else</option>
             </select>
        </td>
    </tr>
    <tr>
        <td>
          <input type="radio" value="0" /> Normal<br>
          <input type="radio" value="1" /> Abnormal<br>
        </td>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                       <input type="text />
                    </td>
                    <td>
                       <input type="checkbox" />
                    </td>
                </tr>
            </table>
       </td>
   </tr>          
</tbody>

我要做的是编写一个能够清除#tbody_name中所有表单字段值的函数。

我尝试过使用.children和.each，但我似乎无法将其一直烧到#tbody_name中的表单字段。

非常感谢任何帮助。

谢谢，

JD

Answer 1

$('#tbody_name').find('input').each(function(){
    if ((this.type === 'radio') || (this.type === 'checkbox'))
    {
        this.checked = false;
    }
    else
    {
        this.value = '';
    }
});

$('#tbody_name').find('select').each(function() {
    this.selectedIndex = 0;
});

编辑：我刚修复代码来处理一些相当愚蠢的错误。它现在应该可以正常工作。

Answer 2

您可以使用find方法横向查找子项，最接近查找父项，然后查找下一个元素：

$('#tbody_name').find('option:first-child').attr('selected', 'selected').closest('tr').next().next().find('input:text').val('');

或者您可以提供表单字段ID并通过ID找到它们：

$('#defaultOption').attr('selected', 'selected');
$('#textInput').val('');

将这些放在一个函数中并从一个按钮调用它。

Answer 3

有很多方法可以做到这一点。您决定使用哪一个取决于您的编码风格。以下解决方案使用jQuery的prop()方法。

$('#tbody_name input[type=radio], #tbody_name [type=checkbox]').each(function() {
   $(this).prop('checked', false); 
});

$('#tbody_name input[type=text]').each(function() {
   $(this).prop('value', ''); 
});

$('#tbody_name select').each(function() {
    $(this).prop('selectedIndex', 0);
});

或者您可以在expicitly上设置对象的属性。这种方法可能更直接和可读：

$('#tbody_name input[type=radio], #tbody_name [type=checkbox]').each(function() {
   this.checked = false;
});

$('#tbody_name input[type=text]').each(function() {
   this.value = '';
});

$('#tbody_name select').each(function() {
    this.selectedIndex = 0;
});

使用jquery清除某个tbody中所有（包括嵌套）表单字段的值

3 个答案: