Javascript 使用唯一ID动态生成多个范围滑块 更新：下面给出了正确答案

因此，我有一个按钮“添加新的子点”，点击按钮，一个新行被添加到表中，带有3个范围滑块。我的问题是，每当我点击一个按钮，JS代码都不会应用到它。我是JS新手，谁能帮我解决这个问题

HTML代码

---

如何编写JS代码，动态创建一行，因为每个ID都应该是唯一的？

您可以使用

document.createElement（'div'）

创建一行，然后使用html创建一个变量并添加（使用

appendChild（）

)将其添加到您创建的div中 这将有助于：

---

这是最新的答案

HTML代码

出席人数-小组
；
；
；

JS代码

$（“.addnew”）。单击（函数（）{
$（此）.attr（“已禁用”、“已禁用”）；
var index=$（“表tbody tr:last child”）.index（）；
var unique_id=1
唯一标识++
变量i=1
我++
变量行=“”+
'' +
'' +
'' +
'' +
'' +
''+行动+''中+
'';
$（“表格”）。追加（第行）；
$（“表tbody tr”）.eq（index+1）。find（.add、.edit“）.toggle（）；
$（'[data toggle=“tooltip”]'）。tooltip（）；
$（“#ex”+唯一的_id+”）.slider（{}）；
$（“#ex”+唯一的_id+”）。在（“幻灯片”上，函数（slideEvt）{
$（“#ex”+i+“slideerval1”）.val（slideEvt.value[0]）；
$（“#ex”+i+“slideerval2”）.val（slideEvt.value[1]）；
});
$（“#lx”+唯一的_id+）。滑块（{}）；
$（“#lx”+唯一的_id+”）。在（“幻灯片”上，函数（slideEvt）{
$（“#lx”+i+“slideval1”）.val（slideEvt.value[0]）；
$（“#lx”+i+“slideerval2”）.val（slideEvt.value[1]）；
});
$（“#zx”+唯一的_id+）。滑块（{}）；
$（“#zx”+唯一的_id+”）。在（“幻灯片”上，函数（slideEvt）{
$（“#zx”+i+“slideval1”）.val（slideEvt.value[0]）；
$（“#zx”+i+“slideval2”）.val（slideEvt.value[1]）；
});
});

但是如果id不是唯一的，那么如何为范围滑块应用js代码。所有的范围滑块都应该有一个唯一的id。根据我例子中的逻辑，你可以做任何你需要的事情。每个html元素的id是否唯一

<tr style="text-align: center;">
<td name="name" id="metrics'+unique_id + '">Attendance - Team</td>
<td>
<input style="width: 50px; height: 30px; border-radius: 10%;" type="number" id="weightage'+unique_id + '" name="weight" value="10">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex2SliderVal1" value="20">
<input style="width: 85px; margin-right: 40px;" id="ex" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex2SliderVal2" value="80">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex3SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="lx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex3SliderVal2"  value="80">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex4SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="zx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
 <input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex4SliderVal2" value="80">
</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
 <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
 <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>

    $("#ex").slider({});
    $("#ex").on("slide", function(slideEvt) {
        $(".ex2SliderVal1").val(slideEvt.value[0]);
        $(".ex2SliderVal2").val(slideEvt.value[1]);
    });
    $("#lx").slider({});
    $("#lx").on("slide", function(slideEvt) {
        $(".ex3SliderVal1").val(slideEvt.value[0]);
        $(".ex3SliderVal2").val(slideEvt.value[1]);
    });
    $("#zx").slider({});
    $("#zx").on("slide", function(slideEvt) {
        $(".ex4SliderVal1").val(slideEvt.value[0]);
        $(".ex4SliderVal2").val(slideEvt.value[1]);
    });

<tr style="text-align: center;">
<td name="name" id="metrics'+unique_id + '">Attendance - Team</td>
<td>
<input style="width: 50px; height: 30px; border-radius: 10%;" type="number" id="weightage'+unique_id + '" name="weight" value="10">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex2SliderVal1" value="20">
<input style="width: 85px; margin-right: 40px;" id="ex" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex2SliderVal2" value="80">
</td>
<td>
 <input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex3SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="lx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex3SliderVal2"  value="80">
</td>
<td>
<input style="width: 20px; margin-bottom: 10px; border: none;" type="text" class="ex4SliderVal1"  value="20">
<input style="width: 85px; margin-right: 40px;" id="zx" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/> 
<input style="width: 25px; border: none; margin-left: 5px;" type="text" class="ex4SliderVal2" value="80">
</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
</td>
</tr>

$(".add-new").click(function(){
        $(this).attr("disabled", "disabled");
        var index = $("table tbody tr:last-child").index();
        var unique_id=1
        unique_id++
        var i = 1
        i++
        var row = '<tr style="text-align: center;">' +
        '<td><input type="text" class="form-control" name="metrics" id="metrics'+unique_id + '"></td>' +
        '<td><input style="width: 50px; height: 30px; border-radius: 10%;" id="weightage'+unique_id + '" type="number" name="weightage"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="ex'+i+'SliderVal1" value="20"><input style="width: 85px; margin-right: 40px;" id="ex'+unique_id + '" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input style="width: 25px; border: none; margin-left: 5px;" type="text" id="ex'+i+'SliderVal2" value="80"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="lx'+i+'SliderVal1" value="20"><input style="width: 85px; margin-right: 40px;" id="lx'+unique_id + '" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input style="width: 25px; border: none; margin-left: 5px;" type="text" id="lx'+i+'SliderVal2" value="80"></td>' +
        '<td><input style="width: 20px; margin-bottom: 10px; border: none;" type="text" id="zx'+i+'SliderVal1" value="20"><input style="width: 85px; margin-right: 40px;" id="zx'+unique_id + '" type="text" class="span2" value="" data-slider-min="0" data-slider-max="100" data-slider-value="[20,80]"/><input style="width: 25px; border: none; margin-left: 5px;" type="text" id="zx'+i+'SliderVal2" value="80"></td>' +
        '<td>' + actions + '</td>' +
        '</tr>';

        $("table").append(row); 
        $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
        $('[data-toggle="tooltip"]').tooltip();

        $("#ex"+unique_id + "").slider({});
        $("#ex"+unique_id + "").on("slide", function(slideEvt) {
            $("#ex"+i+"SliderVal1").val(slideEvt.value[0]);
            $("#ex"+i+"SliderVal2").val(slideEvt.value[1]);
        });

        $("#lx"+unique_id + "").slider({});
        $("#lx"+unique_id + "").on("slide", function(slideEvt) {
            $("#lx"+i+"SliderVal1").val(slideEvt.value[0]);
            $("#lx"+i+"SliderVal2").val(slideEvt.value[1]);
        });
        $("#zx"+unique_id + "").slider({});
        $("#zx"+unique_id + "").on("slide", function(slideEvt) {
            $("#zx"+i+"SliderVal1").val(slideEvt.value[0]);
            $("#zx"+i+"SliderVal2").val(slideEvt.value[1]);
        });

    });