javascript - 如何将具有不同ID标签和文本的html元素附加到我的JavaScript中？

我的当前页面看起来像这样，没有输入框。我遇到的问题是输入。我将拥有具有相同ID名称的多个控件，并且我希望每一行的值都不同。我应该怎么做才能做到这一点？如果我对其进行硬编码，则在每次循环迭代中仍将获得相同的ID标签。我的目标是最终能够添加和删除整个目标组

Target Name: text <--- what it looks like now
Command Line: [ input box ] <----- desired output
Build Env: [ input box ]
Rel Out: [ input box ]
Rel Log: [ input box ]
Dep: [ input box ]

我的JS看起来像：

for (var i = 0; i < records.length; i++) {
    var row = $('<tr></tr>');
    row.append($('<tr></tr>').text("Target Name: " + records[i].TargetName));
    row.append($('<tr></tr>').text("Command Line: " + records[i].CommandLine));
    row.append($('<tr></tr>').text("Build Environment: " + records[i].BuildEnvTypeName));
    row.append($('<tr></tr>').text("Relative Output Path: " + records[i].RelativeOutputPath));
    row.append($('<tr></tr>').text("Relative Log Path: " + records[i].RelativeLogPath));
    row.append($('<tr></tr>').text("Dependencies: " + records[i].Dependencies));
    $('#AddTargetTable').append(row);
}

我要为每个部分附加的输入框部分（这是特定于目标名称之一的）：

<div class="control-group">
    <div class="controls">
        <input type="text" id="target-name" value="<% =TargetName %>" />
    </div>
</div>

最佳答案

如果您将唯一标识符与记录数据一起传递，则可以将该标识符添加到每一行。对于此类任务，您不需要元素ID。

/* add identifier to start of row */
var row = $('<tr data-id="'+records[i].id +'"></tr>');

然后，当您与一行进行交互时，可以使用data-id方法拉出jQuery.data()。

至于input，您需要使用html()而不是text()来存储单元格数据。

一个简单的模板功能将有助于保持混乱

function inputTemplate( value, type){
  return ' <div class="control-group">'+
              '<div class="controls">'+
                    '<input type="text" value="'+value+'" data-type="'+type+'" />'+
              '</div>'+
           '</div>';
}

添加单元格：

row.append($('<td>').html("Command Line: " + inputTemplate( records[i].CommandLine, 'Command')));

现在，为输入添加一个更改处理程序。将使用类似的行遍历方法删除行。

$('.controls input').change(function(){
    var rowId = $(this).closest('tr').data('id');
    var newValue=$(this).val();
    var fieldType= $(this).data('type')
    alert('new value for  '+ fieldType +' in row ' + rowId +' is ' + newValue );
    updateServer( rowId, fieldType, newValue);
})