Question

我有像这样的HTML编码

<form>
<table class="tabelWhiteJenisPembayaran">
    <tbody>
        <tr>
            <td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" placeholder="Jenis Pembayaran" autocomplete="off" style="margin-bottom: 5px;"/></td>
        </tr>
    </tbody>
</table>
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn" type="reset">Batal</button>
</form>

我有一个javascript编码如下

$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
    var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
    $("table.tabelWhiteJenisPembayaran tbody").append(tr);                  
});

如果单击表单将显示一个新表单，例如我在最后一个表单中单击3次，总表单中有4个表单。我想知道的是，当我点击“重置”表格的数量时，如前所述，表格形式为1表格。如何重新设置为1表格。请帮忙。谢谢

Answer 1

我不确定这是不是你想要的。我想你要重置所有表格。

$('form').each(function(){
    this.reset()
});

Answer 2

您可以克隆初始表单元素及其子元素，并在单击重置按钮时将表单替换为克隆。

这是一个小提琴http://jsfiddle.net/qZ6nK/

<script type="text/javascript">
    var formClone = null;
    $(document).ready(function() {
        formClone = $('table.tabelWhiteJenisPembayaran').parents('form').clone();
        $("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
            var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
            $("table.tabelWhiteJenisPembayaran tbody").append(tr);                  
        }); 
    });
    function onReset(e) {
        var parent = $('table.tabelWhiteJenisPembayaran').parents('form').parent();
        $('table.tabelWhiteJenisPembayaran').parents('form').remove();
        parent.append(formClone);
        formClone = $('table.tabelWhiteJenisPembayaran').parents('form').clone();
    }
</script>

<form>
    <table class="tabelWhiteJenisPembayaran">
        <tbody>
            <tr>
                <td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" placeholder="Jenis Pembayaran" autocomplete="off" style="margin-bottom: 5px;"/></td>
            </tr>
        </tbody>
    </table>
    <button class="btn btn-primary" type="submit">Simpan</button>
    <button class="btn" type="reset" onclick="onReset(event)">Batal</button>
</form>

Answer 3

尝试这种方式

$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
    var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
    $("table.tabelWhiteJenisPembayaran tbody").append(tr);                  
}); 

$("[type=reset]").click(function(){
     $('table.tabelWhiteJenisPembayaran tr:not(:first)').remove();
});

Working Demo

像以前一样重置动态表单

3 个答案: