Question

我试图找到输入到表中的两个输入值的总和，并将其显示在同一个表的另一个字段上。但不幸的是，当我试图访问操作的输入值时，javascript显示未定义。请帮我解决这个问题.. 这是javascript代码::

// JavaScript Document
var $ = function(id) {
  return document.getElementById(id);
}
var add = function() {

  var tablenode = $("bod");

  var td = tablenode.getElementsByTagName("td");

  var i;
  if (td.lenght > 0) {
    for (i = 0; i < td.length; i++) {
      alert(td[i].value);
      //td[i+2].value=td[i].value+td[i+1].value;
    }
  } else
    alert("empty td");



}
var ass = function() {
  alert("reached");

  var con = $("bod");
  var row = document.createElement("tr");
  var dat = document.createElement("td");
  var content = document.createElement("input");
  content.type = "text";
  dat.appendChild(content);
  row.appendChild(dat);
  var data = document.createElement("td");
  var contenta = document.createElement("input");
  contenta.type = "text";
  data.appendChild(contenta);
  row.appendChild(data);
  var datb = document.createElement("td");
  var contentb = document.createElement("input");
  contentb.type = "text";
  datb.appendChild(contentb);
  row.appendChild(datb);
  con.appendChild(row);
}
window.onload = function() {
  //$("new").onclick=add;
  ass();
  $("next").onclick = ass;
  $("next").onmouseover = add;



}
here is the main page::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <script type="text/javascript" src="tes.js"></script>
</head>

<body>
  <table width="200" border="1">
    <thead>
      <tr>
        <td>value0</td>
        <td>value1</td>
        <td>total</td>
      </tr>
    </thead>
    <tbody id="bod">
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">grand total
          <input name="grant" type="text" id="grant" />
          <input name="next" type="button" id="next" value="next" />
        </td>
      </tr>
    </tfoot>




  </table>
</body>

</html>

Answer 1

首先你有一个错字：

lenght -> length

第二次改变：

td[i].value

到：

td[i].innerText;

此外，在仔细查看代码时，我认为您需要迭代行，因此您需要i += 3而不是i++

所以整体代码看起来像这样：

// JavaScript Document
var $ = function(id) {
  return document.getElementById(id);
}
var add = function() {

  var tablenode = $("bod");

  var td = tablenode.getElementsByTagName("td");

  var i;
  if (td.length > 0) {
    for (i = 0; i < td.length; i+=3) {
      alert(td[i].innerText);
      // Assuming you have integer values
      //td[i+2].innerText= parseInt(td[i].innerText) + parseInt(td[i+1].innerText);
      // Assuming you don't have integer values
      //td[i+2].innerText= td[i].innerText + td[i+1].innerText;
    }
  } else
    alert("empty td");



}
var ass = function() {
  alert("reached");

  var con = $("bod");
  var row = document.createElement("tr");
  var dat = document.createElement("td");
  var content = document.createElement("input");
  content.type = "text";
  dat.appendChild(content);
  row.appendChild(dat);
  var data = document.createElement("td");
  var contenta = document.createElement("input");
  contenta.type = "text";
  data.appendChild(contenta);
  row.appendChild(data);
  var datb = document.createElement("td");
  var contentb = document.createElement("input");
  contentb.type = "text";
  datb.appendChild(contentb);
  row.appendChild(datb);
  con.appendChild(row);
}
window.onload = function() {
  //$("new").onclick=add;
  ass();
  $("next").onclick = ass;
  $("next").onmouseover = add;

Answer 2

只是评论。

您可以通过在一个语句中创建和追加来使 ass 功能更简洁。您还可以重复使用变量：

var ass = function() {
  alert("reached");

  var con = $("bod");
  var row = document.createElement("tr");
  var cell = row.appendChild(document.createElement("td"));
  var content = cell.appendChild(document.createElement("input"));
  content.type = "text";

  cell = row.appendChild(document.createElement("td"));
  content = cell.appendChild(document.createElement("input"));
  content.type = "text";

  cell = row.appendChild(document.createElement("td"));
  content = cell.appendChild(document.createElement("input"));
  content.type = "text";

  con.appendChild(row);
}

您还可以将第二个两个单元格附加替换为：

row.appendChild(cell.cloneNode(true));
row.appendChild(cell.cloneNode(true));

表输入值无法识别

2 个答案: