Question

我在这里有我申请和尝试过的完整代码。使用下面的JS，我错误地显示了有序列表。它必须在1,2,3 ...（所以来回）。为此，它坚持1.,1.,1. ...。另一个是，使用下面的JS，如何自定义它将获得dynamic输入字段？因为如果我输入5怎么办？字段的结果也必须是5。但是发生了什么，将5个字段添加/附加到当前字段数（样本，我输入3个字段，显示3个字段，因此当输入5时，总共有8个文件）。我想要的是输入数字的确切字段数。（不是那么擅长JS，但我很想学习它的本质）。

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script type="text/javascript">
$(document).ready(function() {
   $("ul").each(function() {
    $(this).find("li").each(function(count) {
       $(this)
         .css("list-style-type", "none")
         .prepend("<div class='listnumber'>" + (count + 1) + ".</div>");
       });
    });
 })    
</script>

<script type="text/javascript">
  $(document).ready(function() {
  $('[name="cand_no"]').on('change', function() {
         if (this.value != '') {
             var val = parseInt(this.value, 10);

             for (var i = 0; i < val; i++) {
                 var $cloned = $('.template tbody').clone();
                 $('#studentTable tbody').append($cloned.html());
         }
     });
  })
</script>   

</head>
 <body>
      <p>
         <label><strong>No.: </strong></label>
         <label><input name="cand_no" type="number" placeholder="Enter no. of fields." /></label>
         <div class="clear"></div>
     </p>
     <div class="cand_fields">
       <table id="studentTable" width="630" border="0">
            <tr>
               <td>Name</td>
            </tr>
            <tr>
               <td><input name="cand_name" type="text" placeholder="Name" required="required" /></td>
            </tr>
       </table>

    </div>

    <div class="template" style="display: none">
       <table>
        <tr >
           <td><ul><li><input name="cand_name" type="text" placeholder="Name" required="required" /></li></ul></td>



           </tr>
        </table>
      </div>
   </body>
</html>

万分感谢..

Answer 1

尝试

$(document).ready(function () {
    $(".template ul li").css("list-style-type", "none").prepend("<div class='listnumber'></div>");
})
$(document).ready(function () {
    var $tmpl = $('.template tbody'),
        $target = $('#studentTable tbody');
    $('[name="cand_no"]').on('change', function () {
        if (this.value != '') {
            var val = (parseInt(this.value, 10) || 0) + 2;
            var len = $target.children().length;

            if (val < len) {
                $target.children().slice(val).remove();
            } else {
                for (var i = len; i < val; i++) {
                    $($tmpl.html()).appendTo($target).find('.listnumber').text(i - 1);
                }
            }
        }
    });
})

演示：Fiddle

创建有序列表并生成输入字段HTML＆amp; JS

1 个答案: