1

我有一个这样的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个表单。我想知道当我单击“重置”时如何将曾经存在的表格数量从 4 个表格变成 1 个表格。如何再次重置为 1 个表单。请帮忙。

4

3 回答 3

0

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

这是一个小提琴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>
于 2012-12-11T08:43:06.170 回答
0

试试这种方式

$("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();
});
​

工作演示

于 2012-12-11T08:45:56.423 回答
0

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

$('form').each(function(){
    this.reset()
});
于 2012-12-11T08:36:52.980 回答