Question

我正在尝试从输入文本框成员的值克隆表中的行并将其循环。循环/克隆后如何更改文本框ID？请帮助我编写代码

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.clonedInput:first').hide();

$('member').ready(function(){
  $("input").change(function(){
    alert("The text has been changed.");
     var number = $("#member").val();
    var e = $('.clonedInput:first');
    $('.clonedInput').not('.clonedInput:first').remove();
    for (i=0;i<number;i++) {
      e.show().clone().insertAfter(e);
    }
    $('.clonedInput:first').hide();
  });
});

</script>
</head>
<body>

<label>Number of boxes: </label><input type="number" id="member">

<div class="row">
    <table class="table table-striped">
        <thead>
            <tr>
                <td>Length</td>
                <td>Width</td>
                <td>Height</td>
                <td>Volumetric Weight</td>
                <td>Total Weight</td>
            </tr>
        </thead>
        <tbody class = "tbodyClone">
            <tr id="clonedInput1" class="clonedInput">
                <td><input id="length" name="length" required type="text" class="form-control" placeholder="" value="" /></td>
                <td><input id="width" name="width" required type="text" class="form-control" placeholder="" value="" /></td>
                <td><input id="height" name="height" required type="text" class="form-control" placeholder="" value="" /></td>
                <td><input id="volumetric_weight" name="volumetric_weight" required type="text" class="form-control" placeholder="" value="" /></td>
                <td><input id="total_weight" name="total_weight" required type="text" class="form-control" placeholder="" value="" /></td>
            </tr>
        </tbody>
    </table>
</div>


</body>
</html>

先谢谢您！

我正在for循环中尝试此操作。但是我不知道我在做什么错

 var cloneIndex=0;
 $(this).parents(".clonedInput").clone()
            .appendTo(".tbodyClone")
            .attr("id", "clonedInput" + cloneIndex)
            .find("*")
            .each(function () {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = match[1] + (cloneIndex);
                }
            })

        cloneIndex++;

Answer 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


$('.clonedInput:last').hide();

$('member').ready(function(){
  $("input").change(function(){
    alert("The text has been changed.");
     var number = $("#member").val();
    var e = $('.clonedInput:first');
    $('.clonedInput').not('.clonedInput:first').remove();
    for (i=0;i<number;i++) {
         var regex = /^(.*)(\d)+$/i;
    var cloneIndex = $(".clonedInput").length;


      e.show().clone().insertBefore(e)
        .attr("id", "clonedInput" + cloneIndex)
            .find("*")
            .each(function () {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = match[1] + (cloneIndex);
                }
            })
    }
    $('.clonedInput:last').hide();
  });
});

</script>
</head>
<body>

<label>Number of boxes: </label><input type="number" id="member">

<div class="row">
    <table class="table table-striped">
        <thead>
            <tr>
                <td>Length</td>
                <td>Width</td>
                <td>Height</td>
                <td>Volumetric Weight</td>
                <td>Total Weight</td>
            </tr>
        </thead>
        <tbody class = "tbodyClone">
            <tr id="clonedInput1" class="clonedInput">
                <td><input id="length0" name="length" required type="text" class="form-control" placeholder="" value="" /></td>
                <td><input id="width0" name="width" required type="text" class="form-control" placeholder="" value="" /></td>
                <td><input id="height0" name="height" required type="text" class="form-control" placeholder="" value="" /></td>
                <td><input id="volumetric_weight0" name="volumetric_weight" required type="text" class="form-control" placeholder="" value="" /></td>
                <td><input id="total_weight0" name="total_weight" required type="text" class="form-control" placeholder="" value="" /></td>
            </tr>
        </tbody>
    </table>
</div>


</body>
</html>

循环时动态更改文本框ID

1 个答案: