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

最新推荐文章于 2021-11-29 16:22:17 发布
最新推荐文章于 2021-11-29 16:22:17 发布
阅读量746 收藏
点赞数
文章标签： Grails Bean IE Ajax J#
因为写毕业设计的原因，自己用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>
[color=red]<tbody id="importGoodsList">[/color] <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.οnlοad=function(){

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

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

providerid.οnchange=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());

[color=cyan]for( var n = 0;n<isCheck.length;n++){
isCheck[n].value=n;
isCheck[n].οnclick=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.οnclick=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);
}
}[/color] 发现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。至于是什么原因，请各位知道的同仁们指出。
mimiaifll
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] <font color=red>原创</font>
10-29
移动鼠标，得到单元格所在表中的位置,主要是学习使用js的e.srcElement.
js操作table中tr的顺序实现上移下移一行的效果
12-04
获取当前要移动tr行的rowIndex，在table中删除掉，然后循环table的rows，到了目标行再直接加进去，最后把整体的html赋值给div完成效果 js代码如下 //使行向上一行 function setRowUp(obj) { if (obj[removed]...
table的 rowIndex 属性
笨鸟快飞的专栏
08-24 4434
rowIndex 属性返回某一行在表格的行集合中的位置（row index）。 语法 tablerowObject.rowIndex 实例 下面的例子返回了某一行在表格中的位置： function alertRowIndex() { alert(document.getElementById("tr1").rowIndex); }
JavaScript rowIndex和cellIndex
weixin_30747253的博客
10-04 611
表格行索引rowIndex，表格列索引：cellIndex 转载于:https://www.cnblogs.com/zhangzhiqian/p/5930364.html
HTML DOM rowIndex 属性
yanleigis的专栏
10-14 1095
  HTML DOM rowIndex 属性返回 HTML DOM Tablerow 对象参考手册定义和用法rowIndex 属性返回某一行在表格的行集合中的位置（row index）。语法tablerowObject.rowIndex实例下面的例子返回了某一行在表格中的位置：function alertRowIndex()  {  alert(docu
js 操作 table 复制行 插入行 获取index ...
Truong的专栏
03-22 2286
一、获取当前行的index：trRow.rowIndex;   二、表中插入行：var row=table.insertRow(index);   三、复制行：var copyRow=trRow.cloneNode(true);   四、在指定行前插入行：trRow.parentNode.insertBefore(copyRow,trRow);
asp.net 不用GridView自带删除功能,删除一行数据
10-29
在这个例子中，使用了一个LinkButton控件，它的`CommandName`属性设置为"Delete"，表示当用户点击这个按钮时，将触发删除操作。同时，`OnClientClick`属性设置了一个确认对话框，确保用户在删除前有明确的提示。 在...
获取table中的rowIndex和cellIndex
01-19
在IECN里有朋友问起怎么获取表格中某个单元格的行号与列号，可以用rowIndex和cellIndex来获取． 具体效果请看下面的代码 获取table中的rowIndex和cellIndex 行1列１ 行1列２ 行1列3 行2列１ 行2列２ 行2...
JS/jQuery实现超简单的Table表格添加,删除行功能示例
10-16
在网页开发中，数据展示经常使用到表格（Table）元素，而动态地添加或删除表格行是常见的交互功能。本文将详细介绍如何使用JavaScript和jQuery来实现这个功能。 首先，我们来看一个基本的HTML结构，包含一个表格...
C# 实现dataGridView选中一行右键出现菜单的示例代码
09-07
本篇文章将深入探讨如何实现当用户在dataGridView中选中一行并点击鼠标右键时，显示一个上下文菜单（ContextMenuStrip）的功能。这个功能在实际应用中十分常见，例如在编辑表格数据时，用户可能需要进行复制、剪切、...
【javascript】使用javascript删除表格对象中的行
口袋里的小龙的专栏
07-25 1171
使用javascript删除表格对象中的行
动态创建table表格页面出现undefined原因以及修改
热门推荐
KI的博客
05-06 2万+
在利用ajax请求json数据后动态显示在表格上，然后发现无论从什么位置开始输出，表格第一行总是会出现undefined，undefined下面所有数据都是输出正确的。
javascript添加、删除行；insertRow/deleteRow/insertCell
zhy4013的专栏
07-08 379
  &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function addRow(){ var newTr = document.getElementById("peopleTable").insertRow(); var newTd0 = newTr.insertCell(); var n...
js删除表格行的误区
adevotee的专栏
05-26 1419
我另外一个页面去改变原来页面的表格的时候,要首先删除掉原来的行,但是却总是不能完全删除,原来的代码如下:function clearRow_callback(){   tblObj = document.getElementById("policyFeeTable");         for( var i=1; i    {      tblObj.deleteRow(i);       
＜tr＞ rowIndex 属性 this.rowIndex
qq_41981122的博客
11-28 886
<tr> rowIndex 属性 this.rowIndex
js 处理表格数据
bearhoop IT之道
09-12 1161
//表格的添加和删除 function tableObject(){} tableObject.prototype.notifyType=''; tableObject.prototype.playRank=''; tableOb
el-table合并单元格
qq_45327886的博客
11-29 3936
el-table合并单元格 及其 注意事项
JavaScript 技术篇-js获取表格元素tr、th、td相对于父节点的索引。
小蓝枣的博客
04-11 5503
js 获取表格元素 tr、th、td 相对于父节点的索引。 rowIndex 可以获取 tr 相对于根节点所有 tr 的索引，会计算之前所有的 tr。 sectionRowIndex 可以获取 tr 相在当前 table 下的索引。 以下面的第二个 tr 为例，rowIndex 的值是 1，sectionRowIndex 的值是 0。 cellIndex 可以获取 th、td 相对于父节点的索引。
element 表单验证值为undefined的原因及解决方案
qing_xing_的博客
09-17 7432
闲话少说，步入正题。 表单验证的时候，值为undefined的原因，网上说的有三种 1、prop名称和rules中的名称一致 2、没有指定的model 3、绑定的属性没有在data中声明（这个可有可无） 除了这三种外，还有一种情况，在验证之前 我们都能拿到表单的值，但是验证之后打印的值为undefined。 我这里具体问题出现的场景：子组件是抽屉，需要里面的值回显到父组件上，但是点击提交的时候值为undefined resetFields（）会将数据恢复初始值，这时候传过去的数据也会.
winform 在datagridview中插入下一行数据时不删除上一行
最新发布
06-10
要在 WinForm 的 DataGridView 中插入下一行数据而不删除上一行，可以使用以下代码： ```csharp // 获取 DataGridView 控件 DataGridView dataGridView1 = new DataGridView(); // 添加一行数据 dataGridView1....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值