Question

我有一个页面，如果需要，可以通过按下按钮创建新的输入文本字段。代码使用基于数字加文本的唯一ID创建输入。我的问题是从文本字段中删除所述文本。有一个硬编码输入，其名称中的数字为0。所以enumAmount ++从0开始并在页面上添加新行之前增加。

这就是我创建新输入文本字段的方式。

$('#add-check-checkbox').click(function(){
            enumAmount++;
            $('.checkbox-table').append('<tbody id="checkbox"><tr><td width="50px" align="center"><i class="fa fa-bars"></i></td><td><a href="javascript:void(0);" class="toggler"><i id=' + enumAmount + "-status" + ' class="fa fa-lg fa-toggle-on green" aria-hidden="true"></i></a></td><td><input id=' + enumAmount + "-check-enum-name"+' type="text" /></td><td><input id=' + enumAmount + "-check-enum-lib-id" + 'type="text" /></td><td><a href="javascript:void(0);"><i id="" & enumAmount & "-check-delete" class="fa fa-lg fa-trash-o red" aria-hidden="true"></i></a></td><td></td><td></td></tr></tbody>');
        });

这正是我想要的方式。它将增加enumAmount并在id字段中输入数字，以便为输入字段创建自定义ID。

我的问题是我的javascript for循环。它不会取代我的数字，我不会得到任何数据。（for循环根据评论更新）

var enumers = {};
for (var i = 0; i < enumAmount; i++){
     var key = $("input#check-enum-name-" + i).val();
     if (key) {
          alert(key) // shows the text i had in the check-enum-name input
          enumers[key] = $("input#check-enum-lib-id-" + i).val();
     }
}

我的for循环有什么问题？

Answer 1

这里有多个问题：

每HTML 4，有效id属性不以数字开头。虽然如果您只想使用HTML 5标准，那就没关系。

注意：使用ASCII字母和数字以外的字符，'_'，' - '和'。'可能会导致兼容性问题，因为HTML 4中不允许这样做。虽然HTML 5中已经解除了这个限制，但ID应该以兼容字母开头。¹

将整数移动到id属性的末尾 - 例如： id="check-enum-name-" + i

使用var关键字在for循环中创建变量 i for (var i=0; i< enumAmount; i++){
对象没有函数 push（） - 尽管array does。在 enumers 上设置属性时，请使用带括号的括号语法： var key = $("input#check-enum-name-" + i ).val(); enumers[key] = $("input#check-enum-lib-id-" + i).val();
等待增加 enumAmount 的值，直到添加新行为止：

$('.checkbox-table').append('<tr ...</tr>'); enumAmount++;
虽然可以为每行添加新的tbody标记，但没有必要。附加代码中的tbody标记具有不同的id值（即复选框），因此使用多个 tbody 标记时，这些值不是唯一的。

除非表格仅包含一个表格主体且没有桌面或脚部分，否则始终需要TBODY开始标记。可以始终安全地省略TBODY结束标记。²

var enumAmount = 0;
$('#add-check-checkbox').click(function() {
  $('.checkbox-table').append('<tr><td width="50px" align="center"><i class="fa fa-bars"></i></td><td><a href="javascript:void(0);" class="toggler"><i id="status-' + enumAmount + '" class="fa fa-lg fa-toggle-on green" aria-hidden="true"></i></a></td><td><input id="check-enum-name-' + enumAmount + '" +  type="text" /></td><td><input id="check-enum-lib-id-' + enumAmount + '" type="text" /></td><td><a href="javascript:void(0);"><i id="check-delete-' + enumAmount + '" class="fa fa-lg fa-trash-o red" aria-hidden="true"></i></a></td><td></td><td></td></tr>');
  enumAmount++;
});
$('#serialize').click(function() {
  var enumers = {};
  var status;
  for (var i = 0; i < enumAmount; i++) {
    var key = $("input#check-enum-name-" + i).val();
    if (key) { //ensure value was entered for key
      enumers[key] = $("input#check-enum-lib-id-" + i).val();
    }
  }
  console.log('enumers: ', enumers);
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-check-checkbox">Add</button>&nbsp;
<button id="serialize">Seralize</button>
<form>
  <table class="checkbox-table">
    
  </table>
</form>

Javascript循环输入和抓取数据

1 个答案: