JavaScript中的删除小问题

最新推荐文章于 2021-01-20 21:06:16 发布

ITurbo

最新推荐文章于 2021-01-20 21:06:16 发布

阅读量4.8k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/worst_hacker/article/details/27071833

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在JavaScript中删除时遇到的小问题，当删除数组中某一部分时，数组下标不断增加，但是在删除的过程中，数组的长度也会递减，所以会出现问题。

例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="byid.js"></script>
  <script type="text/javascript">
  function selectCity()
  {
	var arr = [['--选择城市--'],
	["大连","沈阳","鞍山","锦州"],
	["济南","青岛","临沂","烟台"],
	["佛山","珠海","深圳","广州"],
	["武汉","襄阳","天门","荆门"]];

	var selNode = byId("provinceid");
	var city= byId("cityid1");
	
	var province = selNode.options[selNode.selectedIndex].value;
	var index = selNode.selectedIndex;
	var cities = arr[index]; 
	
	//当不断remove的时候，下标也是不断减小的，所以会报错！
	/*for(var x=0;x<length;x++){
		alert(city.options[x].innerHTML+x+length);
		city.removeChild(city.options[x]);
		
	} */
	//可以用这种方法
	/*for(var x=0;x<city.options.length;){
		//alert(city.options[x].innerHTML+x+length);
		city.removeChild(city.options[x]);
		
	}*/
	//也可以用这种方法
	city.options.length = 0;
	for(var x=0;x< cities.length;x++)
	{
		var opNode = document.createElement("option");
		opNode.innerHTML = cities[x];
		city.appendChild(opNode);
	}
}
</script>
 </HEAD>

 <BODY>
 <div>
 <select id="provinceid" οnchange="selectCity()">
  <option name="province" value="none">---选择省份---</option>
  <option name="province" value="辽宁">辽宁</option>
  <option name="province" value="山东">山东</option>
  <option name="province" value="广东">广东</option>
  <option name="province" value="湖北">湖北</option>
 </select>
<select id="cityid1" >
  <option name="province" value="none">---选择城市---</option>
</select>
 

 </div>
 </BODY>
</HTML>

另一例子：这个例子中还不能简单的像上面的那个例子那么做，因为在删除的过程中有个if判断，它是间断删除的，并不是连续的删除一部分或者全部。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="byid.js"></script>
  <style type="text/css">
  table{
  border :#0000ff 2px solid;
  width:60%;
  }
  </style>
  <script type="text/javascript">
  function delmail(sonName)
  {
	var arr = new Array();
	var arrSon = document.getElementsByName(sonName);
	var j = 0;
	for(var i=0;i<arrSon.length;i++) 
	{
		if(arrSon[i].checked)
		{
		//这样还是错误的，因为你记录的是下标，删除了之后长度会变化，tr中的下标是按照顺序依次增加的，要记录的应该是tr节点对象，然后删除这个节点对象。
			arr[j++]= arrSon[i];//arr[j++] = i;
		}
	}
	for(var i=0;i<arr.length;i++)
	{
	    //原先这样做是错误的arrSon[arr[i]].parentNode.parentNode;
		var trNode = arr[i].parentNode.parentNode;
		trNode.parentNode.removeChild(trNode);	
	}
}
 </script>
 </HEAD>

 <BODY>
  <table width="500" border="1">
   <tr bgcolor="#FFFF66">
     <th>
       全选</th>
     <th align="center">发件人 </th>
     <th>邮件内容</th>
   </tr>

    <tr>
     <td><INPUT name="chkSon" id="chkSon1" type="checkbox"  value='1' οnclick="ChkSonClick('chkSon','chkAll')" />1</td>
     <td> 张三01</td>
     <td> 新的邮件</td>
   </tr>
   <tr>
     <td><INPUT name="chkSon" id="chkSon1" type="checkbox"  value='1' οnclick="ChkSonClick('chkSon','chkAll')" />1</td>
     <td> 张三02</td>
     <td> 新的邮件</td>
   </tr>
   <tr>
     <td><INPUT name="chkSon" id="chkSon2" type="checkbox"  value='2' οnclick="ChkSonClick('chkSon','chkAll')" />2</td>
   <td> 张三03</td>
     <td> 新的邮件</td>
   </tr>
   
   <tr bgcolor="#66FFFF">
   <th>
     功能</th>
     <INPUT name="delall" id="delmail" title="删除所选邮件" onClick="delmail('chkSon')" type="button" value="删除所选邮件"/>
     <th> </th>
   </tr>
 </table>
 </BODY>
</HTML>

ITurbo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的删除小问题

New Document function selectCity(){ var arr = [['--选择城市--'], ["大连","沈阳","鞍山","锦州"], ["济南","青岛","临沂","烟台"], ["佛山","珠海","深圳","广州"], ["武汉","襄阳","天门","荆门"]]; var selNode = byI
复制链接

扫一扫