无法识别的表输入值

我试图找到输入到表中的两个输入值的总和，并将其显示在同一表的另一个字段中。但不幸的是，当我尝试访问操作的输入值时，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>

首先你有一个错别字：

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;

只是一个评论。

您可以通过在一个语句中执行创建和追加来使 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));

相关内容

最新更新

热门标签：