`
chinacq
  • 浏览: 37238 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS中Table的rowIndex在插入一行和删除一行时为undefine，为什么还能用？(Grails)

GrailsBeanIEAjaxJ# 
阅读更多
    因为写毕业设计的原因，自己用Garils框架重新写了一下进销寸管理系统，里面的一些需求自己做了改动。
    今天整了一天的js，就是利用AJAX得到 的数据插入到指定的表格里：全部插入、全部删除、指定插入、指定删除。发现在了两个比较大发现，当然是自己的发现，也许别人早已经知道了，但是我还是利用疲惫的身体在此发表一下自己的发现。
    以下为原代码，共有3个文件，一个显示页面，一个AJAX的SERVER页面和一个JS。
    显示页面代码：


<%@ page import="cn.com.dissertation.Customer" %>
<html>
  <head>
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
  <g:javascript src="jQuery/jquery.js" />
  <g:javascript src="jqImport.js" />
</head>
<body class="auto_table">
  <div style="font-size:15px;text-align:left;">
    <span style="margin-right: 5px;"><g:link  action="create">进货单添加</g:link></span>
  </div>
<g:form name="form1" method="post">
  <div class="table_outline">
    <table id="browser" border="1">
      <tbody>
      <input type="hidden" id="Customer_id" name="Customer_id" value="${new Date().format("yyyy-MM-dd hh:mm:ss")+Math.random()*100}" />
      <tr>
        <th colspan="2" style="font-size:16px;color:blue;">进货单添加</th>
      </tr>

      <tr>
        <td>
          <label>进货单编号</label>
        </td>
        <td >
          <input type="text" readonly="true" id="Import_id" name="Import_id" value="${new Date().format("yyyy-MM-dd hh:mm:ss")+Math.random()*100}"  />

        </td>
      </tr>

      <tr>
        <td>
          <label>供就商</label>
        </td>
        <td >
      <g:select name="provider.id" id="providerid" from="${cn.com.dissertation.Provider.list()}" optionKey="id" value="${outportInstance?.provider?.id}" />
      </td>
      </tr>

      <tr>
        <td>
          <label>支付类型</label>
        </td>
        <td >
      <g:select name="Pay_type"  from="${['现金', '支票']}" value="{'现金','支票'}" />
      </td>
      </tr>

      <tr>
        <td>
          <label>进货时间</label>
        </td>
        <td >
      <g:datePicker name="Import_time" precision="day" value="${outportInstance?.Import_time}"  />
      </td>
      </tr>

      <tr>
        <td>
          <label>操作员</label>
        </td>
        <td >
          <label>后面用session里保存的登陆人员的姓名来添加</label>
        </td>
      </tr>

      <tr>
        <td>
          <label>数量</label>
        </td>
        <td >
      <g:textField id="Number" name="Number" value="${customerInstance?.Number}" />
      </td>
      </tr>

      <tr>
        <td>
          <label>注释</label>
        </td>
        <td>
      <g:textArea name="Comment" name="Comment" value="${customerInstance?.Comment}" rows="3" cols="40"/>
      </td>
      </tr>

      <tr>
        <td>
          <label>进货商品列表</label>
        </td>
        <td >
          <div class="body">
            <div class="table_outline">
              <table id="browser" border="1">
                <thead>
                  <tr>
                    <th>商品ID</th>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>供应商</th>
                    <th>产地</th>
                    <th>规格</th>
                    <th>包装</th>
                    <th>生产批号</th>
                    <th>批准文号</th>
                    <th>描述</th>
                    <th>价格</th>
                    <th>状态</th>
                  </tr>
                </thead>
                <tbody id="importGoodsList">                  <tr></tr>
                </tbody>
              </table>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <label>商品列表</label>
        </td>
        <td><span  id="goodslist">商品查找中……</span></td>
      </tr>


      </tbody>
    </table>
  </div>
  <div class="buttons">
    <span class="button"><input type="button" id="create" class="save" value="添加进货单" /></span>
    <span class="button"><input type="reset" name="reset" class="reset" value="重置"/></span>
  </div>
</g:form>
</body>
</html>


    SERVER代码：

<%@ page import="cn.com.dissertation.Goods" %>
<html>
  <head>
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
  <g:javascript src="jQuery/jquery.js" />
  <g:javascript src="jqImport.js" />
</head>
<body>

  <div class="body">
    <div class="table_outline">

      <table id="browser" border="1">
        <thead>
          <tr>
            <th>商品ID</th>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>供应商</th>
            <th>产地</th>
            <th>规格</th>
            <th>包装</th>
            <th>生产批号</th>
            <th>批准文号</th>
            <th>描述</th>
            <th>价格</th>
            <th>状态</th>
            <th><input type="checkbox" id="isCheckAll" />全选</th>
          </tr>
        </thead>

        <tbody>
        <g:each in="${goodsInstanceList}" status="i" var="goodsInstance">
          <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
            <td id="Goodsid${i}">${fieldValue(bean: goodsInstance, field: "id")}</td>
            <td id="Goods_id${i}">${fieldValue(bean: goodsInstance, field: "Goods_id")}</td>
            <td id="Goods_name${i}">${fieldValue(bean: goodsInstance, field: "Goods_name")}</td>
            <td id="provider${i}">${fieldValue(bean: goodsInstance, field: "provider")}</td>
            <td id="Produce_place${i}">${fieldValue(bean: goodsInstance, field: "Produce_place")}</td>
            <td id="Size${i}">${fieldValue(bean: goodsInstance, field: "Size")}</td>
            <td id="Package${i}">${fieldValue(bean: goodsInstance, field: "Package")}</td>
            <td id="Product_code${i}">${fieldValue(bean: goodsInstance, field: "Product_code")}</td>
            <td id="Promit_code${i}">${fieldValue(bean: goodsInstance, field: "Promit_code")}</td>
            <td id="Description${i}">${fieldValue(bean: goodsInstance, field: "Description")}</td>
            <td id="Price${i}">${fieldValue(bean: goodsInstance, field: "Price")}</td>
            <td id="Available${i}" >
          <g:if test="${goodsInstance.Available == '1'}">      在
          </g:if>
          <g:else>离</g:else>
          </td>
          <td><input type="checkbox" id="isCheck${i}" name="isCheck" /></td>
          </tr>
        </g:each>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>
    JS代码：
function getxhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return xhr;
}

window.onload=function(){

    var providerid = document.getElementById("providerid");
    var goodslist=document.getElementById("goodslist");

    var importGoodsList=document.getElementById("importGoodsList");

    providerid.onchange=function(){
        var xhr = getxhr();
        var url= '../import/list_1';
        xhr.open('get',url+'?time'+(+new Date())+'&gname='+providerid.value);

        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                goodslist.innerHTML=xhr.responseText;

                var isCheckAll=document.getElementById("isCheckAll");//全选、全不选


                var isCheckName=document.getElementsByName("isCheck");//记录数据数量

                var Goodsid = new Array();
                var Goods_id = new Array();
                var Goods_name= new Array();
                var provider= new Array();
                var Produce_place= new Array();
                var Size= new Array();
                var Package= new Array();
                var Product_code= new Array();
                var Promit_code= new Array();
                var Description= new Array();
                var Price= new Array();
                var Available= new Array();

                var isCheck = new Array();

                for(var t = 0;t < isCheckName.length;t++){
                    Goodsid[t] = document.getElementById("Goodsid"+t);
                    Goods_id[t] = document.getElementById("Goods_id"+t);
                    Goods_name[t] = document.getElementById("Goods_name"+t);
                    provider[t] = document.getElementById("provider"+t);
                    Produce_place[t] = document.getElementById("Produce_place"+t);
                    Size[t] = document.getElementById("Size"+t);
                    Package[t] = document.getElementById("Package"+t);
                    Product_code[t] = document.getElementById("Product_code"+t);
                    Promit_code[t] = document.getElementById("Promit_code"+t);
                    Description[t] = document.getElementById("Description"+t);
                    Price[t] = document.getElementById("Price"+t);
                    Available[t] = document.getElementById("Available"+t);
                    isCheck[t] = document.getElementById("isCheck"+t);
                }

                var importGoodsListTr = new Array();//插入行

                alert(new Date());

                  for( var n = 0;n<isCheck.length;n++){
                      isCheck[n].value=n;
                       isCheck[n].onclick=function(){
                         var i =  this.value;
                         if(isCheck[i].checked == true){
                             alert(importGoodsList.rowIndex+1);
                             importGoodsListTr[i]= importGoodsList.insertRow(importGoodsList.rowIndex+1);

                            var importGoodsListTd0=importGoodsListTr[i].insertCell(0);
                            importGoodsListTd0.innerHTML=Goodsid[i].innerHTML;

                            var importGoodsListTd1=importGoodsListTr[i].insertCell(1);
                            importGoodsListTd1.innerHTML=Goods_id[i].innerHTML;

                            var importGoodsListTd2=importGoodsListTr[i].insertCell(2);
                            importGoodsListTd2.innerHTML=Goods_name[i].innerHTML;

                            var importGoodsListTd3=importGoodsListTr[i].insertCell(3);
                            importGoodsListTd3.innerHTML=provider[i].innerHTML;

                            var importGoodsListTd4=importGoodsListTr[i].insertCell(4);
                            importGoodsListTd4.innerHTML=Produce_place[i].innerHTML;

                            var importGoodsListTd5=importGoodsListTr[i].insertCell(5);
                            importGoodsListTd5.innerHTML=Size[i].innerHTML;

                            var importGoodsListTd6=importGoodsListTr[i].insertCell(6);
                            importGoodsListTd6.innerHTML=Package[i].innerHTML;

                            var importGoodsListTd7=importGoodsListTr[i].insertCell(7);
                            importGoodsListTd7.innerHTML=Product_code[i].innerHTML;

                            var importGoodsListTd8=importGoodsListTr[i].insertCell(8);
                            importGoodsListTd8.innerHTML=Promit_code[i].innerHTML;

                            var importGoodsListTd9=importGoodsListTr[i].insertCell(9);
                            importGoodsListTd9.innerHTML=Description[i].innerHTML;

                            var importGoodsListTd10=importGoodsListTr[i].insertCell(10);
                            importGoodsListTd10.innerHTML=Price[i].innerHTML;

                            var importGoodsListTd11=importGoodsListTr[i].insertCell(11);
                            importGoodsListTd11.innerHTML=Available[i].innerHTML;
                         }else{
                             importGoodsList.deleteRow(importGoodsList.rowIndex+1);
                         }
                       }
                   }

                //全选、全不选操作
                isCheckAll.onclick=function(){
                    if(isCheckAll.checked==true){
                        for(var i=0;i<isCheckName.length;i++){

                            isCheckName[i].checked=true;

                            importGoodsListTr[i]=importGoodsList.insertRow(i);

                            var importGoodsListTd0=importGoodsListTr[i].insertCell(0);
                            importGoodsListTd0.innerHTML=Goodsid[i].innerHTML;

                            var importGoodsListTd1=importGoodsListTr[i].insertCell(1);
                            importGoodsListTd1.innerHTML=Goods_id[i].innerHTML;

                            var importGoodsListTd2=importGoodsListTr[i].insertCell(2);
                            importGoodsListTd2.innerHTML=Goods_name[i].innerHTML;

                            var importGoodsListTd3=importGoodsListTr[i].insertCell(3);
                            importGoodsListTd3.innerHTML=provider[i].innerHTML;

                            var importGoodsListTd4=importGoodsListTr[i].insertCell(4);
                            importGoodsListTd4.innerHTML=Produce_place[i].innerHTML;

                            var importGoodsListTd5=importGoodsListTr[i].insertCell(5);
                            importGoodsListTd5.innerHTML=Size[i].innerHTML;

                            var importGoodsListTd6=importGoodsListTr[i].insertCell(6);
                            importGoodsListTd6.innerHTML=Package[i].innerHTML;

                            var importGoodsListTd7=importGoodsListTr[i].insertCell(7);
                            importGoodsListTd7.innerHTML=Product_code[i].innerHTML;

                            var importGoodsListTd8=importGoodsListTr[i].insertCell(8);
                            importGoodsListTd8.innerHTML=Promit_code[i].innerHTML;

                            var importGoodsListTd9=importGoodsListTr[i].insertCell(9);
                            importGoodsListTd9.innerHTML=Description[i].innerHTML;

                            var importGoodsListTd10=importGoodsListTr[i].insertCell(10);
                            importGoodsListTd10.innerHTML=Price[i].innerHTML;

                            var importGoodsListTd11=importGoodsListTr[i].insertCell(11);
                            importGoodsListTd11.innerHTML=Available[i].innerHTML;

                        }
                    }else if(isCheckAll.checked==false){
                        for(var j=0;j<isCheckName.length;j++){
                            isCheckName[j].checked=false;
                            importGoodsList.deleteRow(0);
                        }
                    }

                }
                


            }
        }
        xhr.send(null);
    }
}     发现1：
在IE下开发时，
var isCheckName=document.getElementsByName("isCheck");//记录数据数量
对于isCheckName循环得到innerHTML时是不会得到值的，就是说它是没用的，但在火狐下是正常的。在IE里，如果把获取到对象的Name属性改成id时，IE是可以正常工作的。
    发现2：
    插入一行记录时，我用到了importGoodsList.rowIndex。如果是alert出importGoodsList.rowIndex，它是显示undefined的，不过就在我上面的js代码里用到的一样，循环添加onclick事件时，里面使用 importGoodsListTr[i]= importGoodsList.insertRow(importGoodsList.rowIndex+1) 它就能顺利的添加和删除指定的行了，如果直接alert出importGoodsList.rowIndex+1，显示为NAN。至于是什么原因，请各位知道的同仁们指出。
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jstable添加行删除行复制行

    在处理表格（Table）元素时，JavaScript可以帮助我们实现实时的动态操作，比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素。它用于创建表格，...

    JS 实现动态插入输入框以及删除、位置调换

    此函数中，通过获取当前按钮所在的行索引，利用 `insertRow(rowIndex)` 在特定位置插入一行。 ### 事件处理 **上移** ```javascript function Move_up(button) { // 获取当前行索引 var index = button....

    JQuery实现动态表格点击按钮表格增加一行

    在本例中，变量`count`被用来跟踪新插入行的编号，每次增加一行时，`count`都会递增。变量的作用域决定了它们的可见性和生命周期，本例中`count`的作用域是全局的，这意味着它可以在`add`和`del`函数中被访问和修改...

    js应用之动态增加,删除一行

    在JavaScript编程中，动态添加和删除一行是常见的需求，尤其在构建交互式表格或表单时。本知识点主要探讨如何利用JavaScript实现这个功能，结合HTML和CSS，为用户提供灵活的数据输入和管理界面。 首先，我们需要一...

    table动态添加行

    在网页设计中，表格（Table）是展示数据的重要方式之一。`HTML`表格允许我们以结构化的方式组织信息。在某些交互式应用中，用户可能需要动态地添加或删除表格行，以满足实时编辑和更新数据的需求。"table动态添加行...

    常用的js动态增加（删除）table数据行的功能

    在JavaScript中，动态地添加或删除表格数据行是常见的需求，尤其在开发交互式Web应用时。本篇文章将深入探讨如何实现这些功能，并提供相关的源码示例。 首先，我们来了解一下HTML表格的基本结构。一个表格由`&lt;table...

    通过点击添加按钮即可自动添加一行点击删除即可自动删除一行

    在Web开发中，JavaScript是一种重要的客户端脚本语言，用于增强网页的交互性和动态性。它可以直接在浏览器上运行，无需服务器端的支持。对于“自动添加行”的功能，JavaScript可以通过监听“添加”按钮的点击事件，...

    动态插入、添加删除表格行的JS代码

    本文将通过一个具体的示例来讲解如何使用JavaScript实现动态插入和删除表格行的功能。 #### 一、核心概念与原理 1. **DOM (Document Object Model)**：DOM 是一种标准，用于表示 HTML 和 XML 文档的结构。它定义了...

    JS操作table大全

    在JavaScript的世界里，HTML表格（Table）是一种常用的数据展示方式，而JS操作表格则成为网页动态交互的关键。本文将深入探讨如何使用JavaScript进行表格的创建、修改、删除以及实现一些特殊效果。 首先，我们从...

    js控制table的tr变色

    在 Web 开发中，通过 JavaScript 动态地改变表格 (`table`) 的样式是一种常见的操作。这种方式可以增强用户体验，使得数据展示更加直观、友好。本文将详细介绍如何利用 JavaScript 来实现鼠标悬停时表格行 (`tr`) ...

    js动态操作table实例

    本文将深入探讨如何使用JavaScript实现对表格的动态添加、删除、修改和查询功能，结合给出的标签“源码”和“工具”，我们将以一个实际的示例来解析这一过程。 首先，我们需要理解HTML中的`&lt;table&gt;`元素结构。一个...

    js控制表格排序，插入，删除，移动行或列，导出表格

    本文将深入探讨如何使用纯JavaScript实现表格的排序、插入、删除、移动行或列以及导出功能，同时还会提到如何增加表头。 首先，让我们讨论表格排序。在JavaScript中，我们可以获取表格元素，然后对数据进行比较以...

    js操作table中tr的顺序实现上移下移一行的效果

    在Web开发中，动态地操作表格（table）中的行（tr）是一种常见的需求。本文主要介绍如何使用JavaScript来实现表格中行的上移和下移效果。在详细讲解实现思路之前，先来明确一些关键知识点。 首先，HTML中的表格是由...

    js实现对table的增加行和删除行的操作方法

    在HTML文档中，表格（table）是由表格行（tr）和表格列（td）构成的，JS（JavaScript）则是一种可以嵌入在HTML文档中的脚本语言，用于控制网页的行为和内容。对于动态地在网页上的table增加行和删除行的操作，是非常...

    获取table中的rowIndex和cellIndex

    在IECN里有朋友问起怎么获取表格中某个单元格的行号与列号，可以用rowIndex和cellIndex来获取． 具体效果请看下面的代码 获取table中的rowIndex和cellIndex 行1列１ 行1列２ 行1列3 行2列１ 行2列２ 行2...

    js删除本行代码

    在探讨“js删除本行代码”这一主题时，我们深入解析如何利用JavaScript动态地生成带有删除功能的表格行，并在用户交互中实现行的删除。这个功能在许多Web应用中非常常见，尤其是在需要用户能够编辑或管理列表数据的...

    layui table设置某一行的字体颜色方法

    在Layui table中，如果想要设置某一行的字体颜色，可以通过JavaScript来实现。接下来，我们将详细介绍如何在Layui table中设置某一行的字体颜色。 首先，我们需要了解Layui table的基本结构。Layui table通常由几个...

    js操作html表格, 增加，删除

    在本文中，我们将深入探讨如何使用JavaScript来实现HTML表格的增加和删除功能。 首先，HTML表格是由`&lt;table&gt;`、`&lt;tr&gt;`（行）、`&lt;th&gt;`（表头）和`&lt;td&gt;`（单元格）等标签构成的。通过JavaScript，我们可以对这些元素...

    element-ui table行点击获取行索引（index）并利用索引更换行顺序

    1)将每一行的索引插入操作行中，即为每一行数据添加一个属性index 使用el-table已经给处的方法：tableRowClassName html中： &lt;el row-class-name=tableRowClassName&gt;&lt;/el&gt; js中：只需放入methods中即可，el-table...

Magicbox
Global site tag (gtag.js) - Google Analytics