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

Question

我当前的页面看起来像这样，没有输入框。我遇到的问题是输入。我将拥有多个具有相同 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>

Answer 1

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

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

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

对于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);
})