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

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 Attributeerror:super object has no attribute '__sklearn_tags__'_'
  • ¥15 逆置单链表输出不完整
  • ¥15 宇视vms-B200-A16@R启动不了，如下图所示，在软件工具搜不到，如何解决？(操作系统-linux)
  • ¥500 寻找一名电子工程师完成pcb主板设计（拒绝AI生成式答案）
  • ¥15 关于#mysql#的问题：UNION ALL（相关搜索：sql语句）
  • ¥15 matlab二位可视化能否针对不同数值范围分开分级？
  • ¥15 已经创建了模拟器但是不能用来运行app 怎么办😭自己搞两天了
  • ¥15 关于#极限编程#的问题，请各位专家解答！
  • ¥20 win11账户锁定时间设为0无法登录
  • ¥45 C#学生成绩管理系统