根据参数通过Javascript替换表格主体

Question

我有几个产品我想创建一个 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> 

Answer 2

只要您具有ID，就可以假设您为输入提供ID，就可以为其添加事件监听器。

function MyFunction() {
     // DO Stuff
}
// JS Code to make your table
// ...

// Add Event Listener for input
document.getElementById("myInput").addEventListener("onchange", MyFunction);