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>');

然后，当您与某行互动时，您可以使用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);
})

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

1 个答案: