Javascript 使用jquery动态添加表行号_Javascript_Jquery_Html_Jquery Ui

Javascript 使用jquery动态添加表行号

javascript jquery html jquery-ui

Javascript 使用jquery动态添加表行号,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,在输入字段中输入文本并单击“添加”按钮后，将出现一个新行，其中包含已写入的文本。必须在上一行下添加每一新行。“删除按钮（x）”应允许用户删除确切的行。无论删除了哪一行，行的顺序都应保持不变现在，我做了一个jQuery，它只将输入中的文本插入到一个新的tr中。如何使它动态地添加一个新的行号？如何使按钮看起来像X来删除行 $（文档）.ready（函数（）{ $（“.add行”）。单击（函数（）{ var name=$（“#name”）.val（）； var markup=“”+名称+”； $（

在输入字段中输入文本并单击“添加”按钮后，将出现一个新行，其中包含已写入的文本。必须在上一行下添加每一新行。“删除按钮（x）”应允许用户删除确切的行。无论删除了哪一行，行的顺序都应保持不变

现在，我做了一个jQuery，它只将输入中的文本插入到一个新的tr中。如何使它动态地添加一个新的行号？如何使按钮看起来像X来删除行

$（文档）.ready（函数（）{
$（“.add行”）。单击（函数（）{
var name=$（“#name”）.val（）；
var markup=“”+名称+”；
$（“表tbody”）。追加（标记）；
})});

名称
伯驾
可能是这样的：

$（文档）.ready（函数（）{
$（“.add行”）。单击（函数（）{
var name=$（“#name”）.val（）；
var markup=“”+名称+“删除”；
$（“表tbody”）。追加（标记）；
$（“#名称”）.val（“”）；
});
});
函数del（_el）{
$（_el）.parent（）.remove（）；
}

名称
彼得·帕克德莱特
这真的很粗糙，看起来很糟糕，但它可以做你想做的事情
$(document).ready(function(){
    var count = 1;
        $(".add-row").click(function(){
        var name = $("#name").val();
        var markup = "<tr><td>"+ count + name + "<button>x</button</td></tr>";
        count++
        $("table tbody").append(markup);
   })
});

$（文档）.ready（函数（）{
var计数=1；
$（“.add行”）。单击（函数（）{
var name=$（“#name”）.val（）；
var markup=“”+count+name+”x那么你开始从
那么为什么不继续呢
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="Name">
        <input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Peter Parker</td>
            </tr>
        </tbody>
    </table>

<script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var markup = "<tr><td><button onclick=\"removeItem(this);\">X</button></td><td>" + name + "</td></tr>";
            $("table tbody").append(markup);
        });
    });

    function removeItem(e){
            $(e).parent().parent().remove();
    }
</script>
</body>
</html>


文件
名称
伯驾
$（文档）.ready（函数（）{
$（“.add行”）。单击（函数（）{
var name=$（“#name”）.val（）；
var markup=“X”+名称+”；
$（“表tbody”）。追加（标记）；
});
});
函数删除项（e）{
$（e）.parent（）.parent（）.remove（）；
}

有很多方法可以做到这一点。当我发布这篇文章时，我看到已经发布了3个可行的选项。以下是我的建议

$（函数（）{
函数编号箭头（$t）{
var c=0；
$t.find（“tr”）。每个功能（ind，el）{
$（el）.find（“td:eq（0）”）.html（++c++）；
});
}
$（“#添加服务按钮”）。单击（功能（e）{
e、 预防默认值（）；
var$row=$（“”）；
$row.append（$（“”））；
$row.append（$（“”）.html（$（“#添加服务”）.val（））；
$row.append（$（“”）.html（“”）；
$row.appendTo（$（“#服务表tbody”）；
编号（$（“#服务表”）；
});
$（“#表格输入表格”）。提交（功能（e）{
e、 预防默认值（）；
$（“#添加服务按钮”）。触发器（“单击”）；
});
$（“#服务表”）。在（“单击”，“删除服务”，功能（e）{
e、 预防默认值（）；
var$row=$（this.parent（）.parent（）；
var retResult=confirm（“您确定要删除此条目吗？”）；
如果（结果）{
$row.remove（）；
编号（$（“#服务表”）；
}
});
})；
。表单条目输入{
边框：1px实心#ccc；
宽度：75%；
线高：2米；
左：1米；
}
.表格输入按钮{
边界：0；
背景色：#5AD0A1；
颜色：#fff；
光标：指针；
填充：.6em 1.25em；
}
.表格包装{
字体系列：Arial，无衬线；
}
.表包装器表td{
边框底部：1px虚线#ccc；
填料：1米。2米；
}
.table wrapper表tr：最后一个子项td{
边界底部：0；
}
.table wrapper表td：第一个子级{
颜色：#ccc；
宽度：2米；
}
.表包装器表td:最后一个子表a{
颜色：#F00；
文字装饰：无；
}

添加
好先生，我真的很感谢你的帮助。你救了我。谢谢你！：）很高兴它有帮助。希望你将它标记为答案，如果它有帮助，请投票。