使用JQuery清除文本字段

Clearing text field using JQuery

本文关键字：字段文本清除 JQuery 使用更新时间：2023-09-26

我有一个表，其中只有一行。当按下Enter按钮时，我会动态生成行。这是我的密码。

   <table>
        <thead>
            <tr>
                <th class="text-center">Amount</th>
                <th class="text-center">Installment</th>
                <th class="text-center">Source of Money</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row1" id="rw1">
                <td class="text-center" id="rw1cl1">
                    <input class="form-control" type="text">
                </td>
                <td class="text-center" id="rw1cl2">
                    <input class="form-control" type="text">
                </td>
                <td class="text-center" id="rw1cl3">
                    <input class="form-control" type="text" id="sm">
                </td>
            </tr>
        </tbody>
    </table>

JavaScript

        <script type="text/javascript">
            $(document).ready(function() {
                $('#sm').on('keyup', function(e) {
                    var code = (e.keyCode ? e.keyCode : e.which);
                    if (code == 13) {
                        var cloned = $('.row1').first().clone(true);
                        cloned.insertAfter("#rw1");
                    }
                });
            });

        </script>

正如我所期望的那样，我得到了克隆的行。但问题是，我得到的是带有文本的克隆div，这些文本已经插入到用于进行克隆的前一行。

由于我是JQuery的新手，虽然我对JavaScript有点熟悉，但我不知道如何做到这一点。我尝试了几个堆叠式的答案，但最终没有成功。

请帮我解决这个问题。谢谢

用于清除克隆上的文本框：

 var cloned = $('.row1').first().clone(true);
 cloned.find('input').val("");

更新：正如gmo所建议的，您不应该克隆id。id应该是唯一的。您应该为克隆的TR元素分配新的id。

 var cloned = $('.row1').first().clone(true);
 cloned.attr('id','rw'+($('tbody tr').length+1))
 cloned.find('input').val("");

.clone()中的布尔参数决定是否复制元素数据和事件。请改用var cloned = $('.row1').first().clone();。

   <script type="text/javascript">
        $(document).ready(function() {
            $('#sm').on('keyup', function(e) {
                var code = (e.keyCode ? e.keyCode : e.which);
                if (code == 13) {
                    var cloned = $('.row1').first().clone(true);
                    cloned.find("input").val("").end().insertAfter("#rw1");
                }
            });
        });

    </script>

var cloned = $('.row1').first().clone(true);
cloned.insertAfter("#rw1").find("input").val("");//instering clone after #rw1 and clearing input fields

使用JQuery清除文本字段

Clearing text field using JQuery

演示