基于参数通过Javascript替换表体

Question

我有几个产品要为 A HTML / JS表单创建。 （我现在所有人都以他们自己的个人形式工作正常，但我宁愿使用＆＃34; Master＆＃34;表格。）

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

我已经看到了用于动态创建表的JavaScript，它创建了一个表对象并将这些项加载为数组，但我认为这不会起作用，因为我需要在单元格中输入的onchange事件期间运行函数。 / p>

有没有办法构建多个表体并切换它们？

这是一张模拟图片，展示了如何出现两个不同的产品表格以供澄清。

<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

我要做的是创建一个包含所有产品的对象＆＃39; info，然后为每个产品创建表格行。

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()的函数。

＆＃13;

＆＃13;

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]();
}

＆＃13;

<table>

</table>

＆＃13;

＆＃13;

＆＃13;

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