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

chinacq · 发表于 2013-1-29 10:53:16

因为写毕业设计的原因，自己用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.checked == true){
                           alert(importGoodsList.rowIndex+1);
                           importGoodsListTr= importGoodsList.insertRow(importGoodsList.rowIndex+1);

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

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

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

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

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

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

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

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

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

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

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

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

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

                        isCheckName.checked=true;

                        importGoodsListTr=importGoodsList.insertRow(i);

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

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

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

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

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

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

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

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

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

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

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

                        var importGoodsListTd11=importGoodsListTr.insertCell(11);
                        importGoodsListTd11.innerHTML=Available.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= importGoodsList.insertRow(importGoodsList.rowIndex+1) 它就能顺利的添加和删除指定的行了，如果直接alert出importGoodsList.rowIndex+1，显示为NAN。至于是什么原因，请各位知道的同仁们指出。

		自动登录	找回密码
密码			立即注册