利用javascript是表单隔行换颜色

最新推荐文章于 2020-03-04 16:06:14 发布

Sword_A

最新推荐文章于 2020-03-04 16:06:14 发布

阅读量473

点赞数

分类专栏： ajax/jquery 文章标签： javascript function firefox border table

本文链接：https://blog.csdn.net/yuluo727282752/article/details/7298941

版权

ajax/jquery 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

首先，我们需要一个表单，下面是我用的表单

<table width="300" border="1">
  <tr name="aaa" style="background:#FFF">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr name="bbb" style="background:#000">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr name="aaa" style="background:#FFF">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr name="bbb" style="background:#000">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr name="aaa" style="background:#FFF">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr name="bbb" style="background:#000">
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

接着就是需要一个javascript来控制表单中tr的颜色

我写了两种方法，在firefox都可以显示

第一种，利用tr的name属性

	function editcolor(){

		var color1=document.getElementsByName("aaa");
		for(var i=0;i<color1.length;i++){
			color1[i].style.background="red";
		}
		
		var color2=document.getElementsByName("bbb");
		for(i=0;i<color2.length;i++){
			color2[i].style.background="blue";
		}
		
		
	}

第二种不需要标签属性，单纯的计算表单的奇偶行数

	function editc(){
		var color=document.getElementsByTagName("tr");
		for(var i=0;i<color.length;i++){
			if(i%2==0){
				color[i].style.background="red";
				
			}else{
				
				color[i].style.background="blue";
			}
			
		}
		
	}

效果图：