基於參數

Question

通過Javascript更換表身，我有幾個產品，我想創建對於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){ 
 
\t var opt = { 
 
    \t true: function(){ 
 
    \t var i = '<input type="text" />'; 
 
     return i; 
 
    }, 
 
    false: function(){ 
 
    \t 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);