陣列中的功能不工作

Question

如何設置input框的值？當我的代碼運行gng()功能不起作用。我只看到input框的值爲字符串"gng()"。

<div id="yeni" style="position: absolute; top: 50px; left: 30px; width: 700px; height: 400px; "> </div> 


<script> 
    var tbl = document.createElement('table'); 
    var tr = []; 
    var td = []; 
    var rowcount = 5; 
    var columncount = 3; 
    var dataarray = [["1", "red", " <input value=\"gng(9,5)\">"], 
     ["2", "white", " <input value=\"gng(3,5)\">"], 
     ["3", "black", " <input value=\"gng(4,5)\">"], 
     ["4", "green", " <input value=\"gng(1,5)\">"], 
     ["5", "gray", " <input value=\"gng(2,5)\">"]] 

    for(s = 0; s < rowcount; s++) { 
    tr[s] = document.createElement('tr'); 
    for(i = 0; i < columncount; i++) { 
     td[i] = document.createElement('td'); 
     td[i].innerHTML = dataarray[s][i]; 
     tr[s].appendChild(td[i]); 
    } 
    tbl.appendChild(tr[s]); 
    } 
    document.getElementById('yeni').appendChild(tbl); 
    function gng(a, b) {var c = a/b;return c;} 
</script> 

Answer 1

" <input value=\"gng(9,5)\">"是一個字符串，這意味着它僅僅是文字數據，包括字符串不調用gng在gng(9,5)。相反，您需要圍繞調用' <input value="' + gng(9,5) + '">'連接字符串的周圍部分。你會注意到我用單引號替換了你的字符串的雙引號;在JS單引號和雙引號做同樣的事情。如果您使用單引號，則不必轉義字符串中的雙引號。

因此，完整的代碼應該是這樣的：

function gng(a, b) { 
 
    var c = a/b; 
 
    return c; 
 
} 
 

 
var tbl = document.createElement('table'); 
 
var tr = []; 
 
var td = []; 
 
var i; // remember to declare all variables! 
 
var s; // without declaring s and i they are implicit globals! 
 
var rowcount = 5; 
 
var columncount = 3; 
 
var dataarray = [ 
 
    ["1", "red", ' <input value="' + gng(9,5) + '">'], 
 
    ["2", "white", ' <input value="' + gng(3,5) + '">'], 
 
    ["3", "black", ' <input value="' + gng(4,5) + '">'], 
 
    ["4", "green", ' <input value="' + gng(1,5) + '">'], 
 
    ["5", "gray", ' <input value="' + gng(2,5) + '">'] 
 
    ]; 
 

 
for(s = 0; s < rowcount; s++) { 
 
    tr[s] = document.createElement('tr'); 
 
    for(i = 0; i < columncount; i++) { 
 
    td[i] = document.createElement('td'); 
 
    td[i].innerHTML = dataarray[s][i]; 
 
    tr[s].appendChild(td[i]); 
 
    } 
 
    tbl.appendChild(tr[s]); 
 
} 
 
document.getElementById('yeni').appendChild(tbl);

<div id="yeni" style="position: absolute; top: 50px; left: 30px; width: 700px; height: 400px; "> </div>

如果你的目標是支持template literals瀏覽器，你可以內嵌它來代替：

["1", "red", `<input value="${gng(9,5)}">`], 

如果我正在寫這個，我會做一點不同。取而代之的for，我會用數據的陣列上的forEach method：

function gng(a, b) { 
 
    var c = a/b; 
 
    return c; 
 
} 
 

 
var tbl = document.createElement('table'), 
 
    dataArray = [ 
 
    ["1", "red", ' <input value="' + gng(9,5) + '">'], 
 
    ["2", "white", ' <input value="' + gng(3,5) + '">'], 
 
    ["3", "black", ' <input value="' + gng(4,5) + '">'], 
 
    ["4", "green", ' <input value="' + gng(1,5) + '">'], 
 
    ["5", "gray", ' <input value="' + gng(2,5) + '">'] 
 
    ]; 
 

 
dataArray.forEach(function (row) { 
 
    var tr = document.createElement('tr'); 
 
    row.forEach(function (data) { 
 
    var td = document.createElement('td'); 
 
    td.innerHTML = data; 
 
    tr.appendChild(td); 
 
    }); 
 
    tbl.appendChild(tr); 
 
}); 
 

 
document.getElementById('yeni').appendChild(tbl);

<div id="yeni" style="position: absolute; top: 50px; left: 30px; width: 700px; height: 400px; "> </div>

這樣做可以讓你消除一些變量，使代碼更容易閱讀和理解。它還使得它在將來更易於維護，因爲如果更改數據數組，則不再需要記住手動更新列和行數。