Question

我正在尝试使用以下代码在动态创建的表内设置动态创建的输入的id值。从逻辑上讲，我试图将id设置为table.description + i（例如V1，F1），但它不允许正确创建表，并且控制台只显示每次迭代的newInput.id。如何指定与描述和迭代器值匹配的id值？

由于

function addBaseTable() {

var BaseTable = [
{"description": "V", input1: true, "specification": "Pass/Fail", input2: false, input3: false, input4: true,"result": "Pass",input5: true},
{"description": "F",input1: true,"specification": "≥ " + fSpec + "mL/min<br>" +flowAmtMin ,input2: true,input3: true,input4: true,"result": "Pass",input5: true},
{"description": "BP",input1: true,"specification": "≥ " + bpSpec + " psi <br>RV:Spec "+bpRV+" ",input2: true,input3: true,input4: true,"result": "Pass",input5: true},
{"description": "RP",input1: true,"specification": "≤ " + rpSpec + "",input2: true,input3: true,input4: true, "result":"Pass",input5: true},
{"description": "V2",input1: true,"specification": "≥ " + v2Spec + " ",input2: false,input3: false,input4: true,"result": "Pass",input5: true},
{"description": "HB",input1: true,"specification": '≥ +' + bSpec + ' psi <br>RV:',input2: false,input3: false,input4: true,"result": "Pass",input5: true},
{"description": "SD",input1: true,"specification": '≤ ' + sdSpec + ' <br>RV: 0 Range ',input2: true,input3: true,input4: true,"result": "Pass",input5: true},
{"description": "P",input1: true,"specification": "< 0",input2: false,input3: false,input4: true,"result": "Pass",input5: true}
];

var allRows = [];
for (var i = 0; i < IV5BaseTable.length; i++) {

var row = "<tr>" + "<td>" + BaseTable[i].description + "</td>" +
    "<td>" + createInput(BaseTable[i].input1,BaseTable,i) + "</td>" +
    "<td>" + BaseTable[i].specification + "</td>" +
    "<td>" + createInput(BaseTable[i].input2,BaseTable,i) + "</td>" +
    "<td>" + createInput(BaseTable[i].input,BaseTable,i3) + "</td>" +
    "<td>" + createInput(BaseTable[i].input4,BaseTable,i) + "</td>" +
    "<td>" + BaseTable[i].result + "</td>" +
    "<td>" + createInput(BaseTable[i].input5,BaseTable,i) + "</td>" + "</tr>";

    allRows.push(row);
}

var tableRef = document.getElementById("tBodyTestTable");

tableRef.innerHTML = allRows.join(" ");
}
//Pass True||False, the Table, and the row number
function createInput(val,table, i){
var opt = {
true: function(){
    var newInput = '<input type="text" class="testingField"/>';
    newInput.id = "table.description" + i ;
  return newInput;
},
false: function(){
    return "N/A"
}
  };
  return opt[val]();
}

Answer 1

你可以用它。

true: function(){
  var newInput = document.createElement("input");
  newInput.setAttribute("id", table.description + i);
  newInput.setAttribute("type", "text"); 
  newInput.setAttribute("class", "testingField");
  return newInput;
}

或者你可以使用它，

true: function(){
    var id = table.description + i;
    return '<input type="text" class="testingField"   id="'+id+'">';
}

Answer 2

您需要像这样修改代码：

true: function(){
  var newInput = '<input type="text" class="testingField" 
  id="'+table[i].description + i+'"/>';

  //newInput.id = "table.description" + i ;//Comment this line
  return newInput;
}

请注意，您在引用的字符串中使用"table.description"。此外，newInput是一个字符串，因此您无法为其附加属性ID。相反，按照我在上面的代码中显示的方式使用它，我使用table[i].description编写id属性。

如何在动态创建的输入上设置input.id

2 个答案: