Uncaught TypeError: Cannot read property 'length' of undefined" 怎么解决啊

add another line 点击无反应

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TK</title>
    <style>
        .dataTableHeadingRow{
    border: 1px solid #E8E8E8;
    border-collapse: collapse;
    width: 5;
        }
        input[type=number]{
    width: 40px;
} 

    </style>
</head>

<body>
<tr>
<td>
<table style="" bordercolor="#000000" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table style="width: 10px;" border="0" cellspacing="1" cellpadding="1">
<tbody>
<tr class="dataTableHeadingRow">
<th class="dataTableHeadingContent" align="left">QTY</th>
<th class="dataTableHeadingContent" align="left" width="60%"><span style="font-size: medium;">ITEM# OR DESCRIPTION</span></th>
<th class="dataTableHeadingContent" align="left" width="30%"><span style="font-size: medium;">NOTES</span></th>
</tr>
<tr class="dataTableRow">
  <td class="QTY ROW" align="left"><input type="number"></td>        
  <td class="ITEM ROW" align="left" ><input type="text" list="product" input size="75" ></td>
  <td class="NOTES ROW" align="center" width=""><input type="text" input size="40"></td>
</tr>
    </tbody>
</table>
<div><input type="button" class="button" value="Add another line" onclick="addField();"></div>
    </td>
</tr>
</tbody>
</table>
</td>
</tr>

 <script type="text/javascript">
        function addField (argument) {
            var dataTableRow = document.getElementsByClassName("dataTableRow");
            var currentIndex = "dataTableRow".rows.length;
            var currentRow = "dataTableRow".insertRow(-1);

            var QTY  = document.createElement("input");
            QTY .setAttribute("name", "QTY " + currentIndex);

            var ITEM  = document.createElement("input");
            ITEM .setAttribute("name", "ITEM " + currentIndex);

            var NOTES  = document.createElement("input");
            NOTES .setAttribute("name", "NOTES " + currentIndex);

            var addRowBox = document.createElement("input");
            addRowBox.setAttribute("type", "button");
            addRowBox.setAttribute("value", "Add another line");
            addRowBox.setAttribute("onclick", "addField();");
            addRowBox.setAttribute("class", "button");

            var currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(QTY);

            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(ITEM);

            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(NOTES);

            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(addRowBox);
        }
    </script>
</body>
</html>



<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>TK</title>
  <style>
    .dataTableHeadingRow{
      border: 1px solid #E8E8E8;
      border-collapse: collapse;
      width: 5;
    }
    input[type=number]{
      width: 40px;
    }
  </style>
</head>
<body>
<tr>
  <td>
    <table style="" bordercolor="#000000" cellspacing="0" cellpadding="0">
      <tbody>
      <tr>
        <td>
          <table id="table" style="width: 10px;" border="0" cellspacing="1" cellpadding="1">
            <tbody>
            <tr class="dataTableHeadingRow">
              <th class="dataTableHeadingContent" align="left">QTY</th>
              <th class="dataTableHeadingContent" align="left" width="60%"><span style="font-size: medium;">ITEM# OR DESCRIPTION</span></th>
              <th class="dataTableHeadingContent" align="left" width="30%"><span style="font-size: medium;">NOTES</span></th>
            </tr>
            <tr class="dataTableRow">
              <td class="QTY ROW" align="left"><input type="number"></td>
              <td class="ITEM ROW" align="left" ><input type="text" list="product" input size="75" ></td>
              <td class="NOTES ROW" align="center" width=""><input type="text" input size="40"></td>
            </tr>
            </tbody>
          </table>
          <div><input type="button" class="button" value="Add another line" onclick="addField();"></div>
        </td>
      </tr>
      </tbody>
    </table>
  </td>
</tr>
<script type="text/javascript">
  function addField (argument) {
    var dataTableRow = document.getElementsByClassName("dataTableRow");

    var currentIndex = dataTableRow.length;
    var table = document.getElementById("table");
    var currentRow = table.insertRow(-1);
    currentRow.setAttribute("class","dataTableRow");

    var QTY  = document.createElement("input");
    QTY .setAttribute("name", "QTY " + currentIndex);
    QTY .setAttribute("type","number")

    var ITEM  = document.createElement("input");
    ITEM .setAttribute("name", "ITEM " + currentIndex);
    ITEM .setAttribute("size","75")

    var NOTES  = document.createElement("input");
    NOTES .setAttribute("name", "NOTES " + currentIndex);
    NOTES .setAttribute("size","40")


    // var addRowBox = document.createElement("input");
    // addRowBox.setAttribute("type", "button");
    // addRowBox.setAttribute("value", "Add another line");
    // addRowBox.setAttribute("onclick", "addField();");
    // addRowBox.setAttribute("class", "button");

    var currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(QTY);
    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(ITEM);
    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(NOTES);
    // currentCell = currentRow.insertCell(-1);
    // currentCell.appendChild(addRowBox);
  }
</script>
</body>
</html>

直接拷贝以上代码即可，所有bug已经修复
主要问题点有：
1、var currentIndex = "dataTableRow".rows.length;
"dataTableRow" 字符串没有rows方法，dataTableRow这个是集合 可以直接dataTableRow.length获取长度

2、var currentRow = "dataTableRow".insertRow(-1);
和1一样 "dataTableRow" 字符串没有insertRow方法，并且dataTableRow这个document也没有insertRow方法，这个方法是table才有，所有我这里给table一个ID，然后用table去调用insertRow方法
var currentRow = table.insertRow(-1);

并且在下面补充了给新增的currentRow加上class，否则currentIndex获取到的长度永远是1
currentRow.setAttribute("class","dataTableRow");

3、这里给QTY、ITEM、NOTES补上了type、size等属性，保证每行样式统一

4、去掉了addRowBox的添加，如果需要，可以把注释的代码放开即可

如果能帮到你，望【采纳】，谢谢

有多处错误，你直接拷贝下面的代码执行！有帮助请采纳！


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TK</title>
    <style>
        .dataTableHeadingRow{
    border: 1px solid #E8E8E8;
    border-collapse: collapse;
    width: 5;
        }
        input[type=number]{
    width: 40px;
} 
    </style>
</head>
<body>
<tr>
<td>
<table style="" bordercolor="#000000" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table id="dataTableRow" style="width: 10px;" border="0" cellspacing="1" cellpadding="1">
<tbody>
<tr class="dataTableHeadingRow">
<th class="dataTableHeadingContent" align="left">QTY</th>
<th class="dataTableHeadingContent" align="left" width="60%"><span style="font-size: medium;">ITEM# OR DESCRIPTION</span></th>
<th class="dataTableHeadingContent" align="left" width="30%"><span style="font-size: medium;">NOTES</span></th>
</tr>
<tr class="dataTableRow">
  <td class="QTY ROW" align="left"><input type="number"></td>        
  <td class="ITEM ROW" align="left" ><input type="text" list="product" input size="75" ></td>
  <td class="NOTES ROW" align="center" width=""><input type="text" input size="40"></td>
</tr>
    </tbody>
</table>
<div><input type="button" class="button" value="Add another line" onclick="addField();"></div>
    </td>
</tr>
</tbody>
</table>
</td>
</tr>
 <script type="text/javascript">
        function addField (argument) {
            var dataTableRow = document.getElementById("dataTableRow");
            var currentIndex = dataTableRow.rows.length;
            var currentRow = dataTableRow.insertRow(-1);
            var QTY  = document.createElement("input");
            QTY .setAttribute("name", "QTY " + currentIndex);
            var ITEM  = document.createElement("input");
            ITEM .setAttribute("name", "ITEM " + currentIndex);
            var NOTES  = document.createElement("input");
            NOTES .setAttribute("name", "NOTES " + currentIndex);
            var addRowBox = document.createElement("input");
            addRowBox.setAttribute("type", "button");
            addRowBox.setAttribute("value", "Add another line");
            addRowBox.setAttribute("onclick", "addField();");
            addRowBox.setAttribute("class", "button");
            var currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(QTY);
            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(ITEM);
            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(NOTES);
            currentCell = currentRow.insertCell(-1);
            currentCell.appendChild(addRowBox);
        }
    </script>
</body>
</html>

你console.log打印一下获取长度的这个变量是不是没值,currentIndex。获取不到就是未定义。不清楚的话，每个变量都需要打印一下，这样就知道程序执行到哪里了

1、只凭一句 抱错日志 就来评判是否对错，有点偏差

2、需要看具体的日志和具体的环境才能处理

3、html和javascript发展到今天，就算有部分语法错误，也能自动修复并展示，但还是出现问题，那就说明自动修复处理不了，需要根据你的具体环境来分析

4、如需协助，欢迎交流。