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(9,5)不会调用gng。相反，您需要围绕调用' <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>

这样做可以消除某些变量，使代码更易于阅读和理解。它还使其在未来更易于维护，因为如果更改数据数组，您不再需要记住手动更新列数和行数。

数组中的函数不起作用

1 个答案: