js 动态表使用checkbox全选(单选)的删除问题!(附代码)
////////////以下代码是可以运行的 属于jsp文件
<%@ page language= "java " contentType= "text/html; charset=UTF-8 " pageEncoding= "GBK "%>
<html>
<head>
<title> 枚举字符串 </title>
<script language= "javascript " type= "text/javascript " src= "Textlimit.js " >
</script>
<script language= "JavaScript ">
var tt;//输出计数
var s=1;//增加计数
var u=1; //检查计数
var n;
var intRowIndex = 0;
arrcat =new Array(); //最终返回的全部结果数组
arrsub =new Array(); //检查错误的数组
//值检查
function JHshLTrim(sString)
{
var sStr,i,iStart,sResult = " ";
sStr = sString.split( " ");
iStart = -1 ;
for (i = 0 ; i < sStr.length ; i++)
{
if (sStr[i] != " ")
{
iStart = i;
break;
}
}
if (iStart == -1) { return " " ;} //表示sString中的所有字符均是空格,则返回空串
else { return sString.substring(iStart) ;}
}
function check(tbIndex)
{
if(JHshLTrim(document.getElementById( 'myCell1 ').value)== " ")
{
alert( "显示名不能为空! ");
return false;
}
if(JHshLTrim(document.getElementById( 'myCell2 ').value)== " ")
{
alert( "参数值不能为空! ");
return false;
}
if(JHshLTrim(document.getElementById( 'myCell3 ').value)== " ")
{
alert( "描述不能为空! ");
return false;
}
if(document.getElementById( 'myCell2 ').value!= " ")
{
for(u=1;u <=s;u++)
{
if(arrcat[u*3-1]==document.getElementById( 'myCell2 ').value)
{
(document.getElementById( 'myCell2 ').value+ " 已经存在 ");
return false;
}
else
{
}
}
insertRow(tbIndex);
}
}
function insertRow(tbIndex)
{
var objRow = myTable.insertRow(tbIndex);
var objCel = objRow.insertCell(0);
objCel.innerHTML = " <input type=checkbox onclick= 'getIndex() ' /> ";
var objCel = objRow.insertCell(1);
objCel.innerHTML=document.myForm.myCell1.value;
var objCel = objRow.insertCell(2);
objCel.innerHTML=document.myForm.myCell2.value;
var objCel = objRow.insertCell(3);
objCel.innerHTML=document.myForm.myCell3.value;
objRow.attachEvent( "onclick ", getIndex);
objRow.style.background = "white ";
//增加到arrcat
arrcat[s*3-2]=[document.getElementById( 'myCell1 ').value];
arrcat[s*3-1]=[document.getElementById( 'myCell2 ').value];
arrcat[s*3-0]=[document.getElementById( 'myCell3 ').value];
s=s+1;
//alert( "总长 "+arrcat.length);
//for(tt=1;tt <arrcat.length;tt++)//调试输出
{
//alert( "arrcat的第 "+tt+ "行 "+arrcat[tt]);
}
}
function deleteRow(tbIndex)
{
if(tbIndex!=0 && tbIndex!=null)
{
myTable.deleteRow(tbIndex);
arrcat.splice(tbIndex*3-2, 3);
s=s-1;
}
}
function getIndex()
{
intRowIndex = event.srcElement.parentElement.rowIndex;
// alert(intRowIndex);
pos.innerText = intRowIndex;
}
function dosave()
{
opener.clearstr();
//alert( "back ");
//parent.opener.getArray(arrcat);
opener.getArray(arrcat);
window.close();
}
</script>
</head>
<body onload= "pos.innerText=intRowIndex; " class= "avidmPageBody ">
<tr>
<td width= "2% ">
<img src= " <%=request.getContextPath()%> /images/common/common.gif " width= "24 " height= "24 ">
</td>
<td width= "98% ">
枚举值列表
</td>
</tr>
您已选中第 :
<span id= "pos "> </span> 行
<table id= "myTable " class= "avidmListTable " width= "80% " border= "1 ">
<tr onselect= "getIndex() ">
<th class= "avidmTableHeader ">
<div align= "center ">
<INPUT type= "checkbox ">
</div>
</th>
<th class= "avidmTableHeader ">
<div align= "center ">
名称
</div>
</th>
<th class= "avidmTableHeader ">
<div align= "center ">
值
</div>
</th>
<th class= "avidmTableHeader ">
<div align= "center ">
描述
</div>
</th>
</tr>
</table>
<form name= "myForm " class= " ">
<table width= "60% " border= "0 " class= "avidmPropertyTable ">
<tr>
<td width= "15% " class= "avidmPropertyItem " align= "right ">
名称 :
</td>
<td width= "85% " class= "avidmPropertyValue ">
<input type= "text " id= "myCell1 " name= "myCell1 " value= " " onkeyup= "limitLength(value,100, ' ', 'myCell1 ') " />
</td>
</tr>
<tr>
<td width= "15% " class= "avidmPropertyItem " align= "right ">
值 :
</td>
<td width= "85% " class= "avidmPropertyValue ">
<input type= "text " name= "myCell2 " value= " " onkeyup= "limitLength(value,100, ' ', 'myCell2 ') " />
</td>
</tr>
<tr>
<td width= "15% " class= "avidmPropertyItem " align= "right ">
描述 :
</td>
<td width= "85% " class= "avidmPropertyValue ">
<input type= "text " name= "myCell3 " value= " " onkeyup= "limitLength(value,100, ' ', 'myCell3 ') " />
</td>
</tr>
</table>
<input type= "button " onclick= "return check(myTable.rows.length); " value= "添加 " class= "AvidmButton ">
<input type= "button " onclick= "deleteRow(intRowIndex) " value= "删除 " class= "AvidmButton ">
<input type= "button " onclick= "dosave() " value= "保存 " class= "AvidmButton ">
</form>
</body>
</html>
主要实现了行的添加删除(不提供修改功能) , 行的删除现在是通过onclick()得到这行在动态表的位置进行删除的.
问题是:要改成 通过首行那个checkbox 全选后点 "删除 "来删 ,或只选其中一个或几个来删
注意:下方的mycell1 mycell2....这些不要写入标签啊 代码啊什么的 因为这些值要取得返回的!其他的就随便改了!改出来要能用哦~这是我的全部分了,高手来接分啊
[解决办法]
function del_all(){
var inputs=document.getElementsByTagName( "input ");
for(var i=0;i <inputs.length;i++){
if(inputs[i].type== "checkbox "&&inputs[i].checked)
inputs[i].parentElement.parentElement.parentElement.parentElement.removeChild(inputs[i].parentElement.parentElement.parentElement)
}
