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

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的添加,如果需要,可以把注释的代码放开即可

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 9月1日
  • 已采纳回答 9月1日
  • 赞助了问题酬金 8月31日
  • 修改了问题 8月31日
  • 展开全部

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题