javascript - 根据参数通过 Javascript 替换表体

Question

我有几个产品要为其创建A HTML/JS 表单。 (我目前让它们都以各自的形式运行良好，但我宁愿使用“主”形式。)

表单需要根据产品显示不同行的表格。

我已经看到用于动态创建表格的 JavaScript，方法是创建表格对象并将项目加载为数组，但我认为这行不通，因为我需要在单元格中输入的 onchange 事件期间运行函数。

有没有办法建立多个表体并进行切换？

这是一张模拟图片，展示了两个不同的产品表可能会如何显示以进行说明。

<script> window.onload = "addTable()" </script>

function addTable() {

var base5Table = [{
        "description": "Visual",
        input1: true,
        "specification": "Pass/Fail",
        input2: false,
        input3: false,
        input4: true,
        "result": "Pass",
        input5: true
    },
    {
        "description": "Rate",
        input1: true,
        "specification": "≥ 200 ",
        input2: true,
        input3: true,
        input4: true,
        "result": "Pass",
        input5: true
    }
];
var allRows = [];
for (var i = 0; i < base5Table.length; i++) {
    var row = "<tr>" + "<td>" + base5Table[i].description + "</td>" +
        "<td>" + base5Table[i].input + "</td>" +
        "<td>" + base5Table[i].specification + "</td>" +
        "<td>" + base5Table[i].input2 + "</td>" +
        "<td>" + base5Table[i].input3 + "</td>" +
        "<td>" + base5Table[i].input4 + "</td>" +
        "<td>" + base5Table[i].result + "</td>" +
    "<td>" + base5Table[i].input5 + "</td>" + "</tr>";

        allRows.push(row);
}
document.querySelector('table').innerHTML = allRows.join(" ");
}

Answer 1

我要做的是创建一个包含所有产品信息的对象，然后为每个产品创建表格行。

var products = [{'name':'product1','price':10,'color':'red'},
                {'name':'product2','price':15,'color':'blue'},
                {'name':'product3','price':20,'color':'green'}
               ];
//save all rows here
var allRows = [];

 for(var i = 0; i < products.length; i++){
   var row = '<tr>'+'<td>'+products[i].name+'</td>'+
             '<td>'+products[i].price+'</td>'+
             '<td>'+products[i].color+'</td>'+'</tr>';
   allRows.push(row);
}
//append all rows to page
document.querySelector('table').innerHTML = allRows.join(' ');

编辑

此代码将执行您想要的所有操作，包括插入输入元素。您需要脚本来创建输入元素。所以我创建了一个名为 createInput() 的函数。

addTable();

function addTable() {

var base5Table = [{
        "description": "Visual",
        input1: true,
        "specification": "Pass/Fail",
        input2: false,
        input3: false,
        input4: true,
        "result": "Pass",
        input5: true
    },
    {
        "description": "Rate",
        input1: true,
        "specification": "≥ 200 ",
        input2: true,
        input3: true,
        input4: true,
        "result": "Pass",
        input5: true
    }
];
var allRows = [];
for (var i = 0; i < base5Table.length; i++) {
    var row = "<tr>" + "<td>" + base5Table[i].description + "</td>" +
        "<td>" + createInput(base5Table[i].input1) + "</td>" +
        "<td>" + base5Table[i].specification + "</td>" +
        "<td>" + base5Table[i].input2 + "</td>" +
        "<td>" + base5Table[i].input3 + "</td>" +
        "<td>" + base5Table[i].input4 + "</td>" +
        "<td>" + base5Table[i].result + "</td>" +
    "<td>" + base5Table[i].input5 + "</td>" + "</tr>";

        allRows.push(row);
}
document.querySelector('table').innerHTML = allRows.join(" ");
}

//this function will return an input element if true
function createInput(val){
	var opt = {
  	true: function(){
    	var i = '<input type="text" />';
      return i;
    },
    false: function(){
    	return
    }
  };
  return opt[val]();
}

<table>

</table>