IGGToday
2021-08-31 03:25
采纳率: 66.7%
浏览 173
已结题

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>

  • 收藏

4条回答 默认 最新

  • 峰子哥哥 2021-08-31 16:11
    已采纳
    
    <!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的添加,如果需要,可以把注释的代码放开即可

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

    已采纳该答案
    1 打赏 评论
  • 急速光粒 2021-08-31 08:42

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

    
    <!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>
     
    
    1 打赏 评论
  • 孙叫兽 2021-08-31 07:56

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

    打赏 评论
  • kk1924 2021-08-31 11:43

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

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

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

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

    打赏 评论

相关推荐 更多相似问题