javascript自动增加表格行，支持多种浏览器

最新推荐文章于 2024-06-10 16:49:10 发布

fzhedu

最新推荐文章于 2024-06-10 16:49:10 发布

阅读量938

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/fzh90/article/details/9199993

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=23)">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态增加行</title>
<script language="javascript" type="text/javascript">
var ind=0;
function addRow()
{
	var tbs=document.getElementById("tb");
	var tbrow=tbs.insertRow();//添加一行
	tbrow.align="center";
	ind=ind+1;
	var tbtd=tbrow.insertCell(-1);//添加一个单元格	
	tbtd.innerHTML="<input type='text' name='detail"+ind+"' id='detail"+ind+"' size='42'>";
	var tbtd=tbrow.insertCell(-1);//添加一个单元格	
	tbtd.innerHTML="<select name='class"+ind+"' id='class"+ind+"'><option value='国家级'>国家级</option><option value='省部级'>省部级</option><option value='校级'>校级</option><option value='院级'>院级</option></select>";
	var tbtd=tbrow.insertCell(-1);//添加一个单元格	
	tbtd.innerHTML="<input type='text' name='weight"+ind+"' id='weight"+ind+"' value='1' size='4'>";
	var tbtd=tbrow.insertCell(-1);//添加一个单元格	
	tbtd.innerHTML="<input type='radio' name='rad"+ind+"' id='rad"+ind+"' value='yes'>是<input type='radio' name='rad"+ind+"' id='rad"+ind+"' value='no'>否";
	var tbtd=tbrow.insertCell(-1);//添加一个单元格	
	tbtd.innerHTML="<input type='button' value=' - ' οnclick='delRow()'>";	
}
function delRow()
{
	index=event.srcElement.parentElement.parentElement.rowIndex;
	var tbv=document.getElementById("tb");
	tbv.deleteRow(index);
}

function show()
{
	var tab = document.getElementById("tb") ;//表格行数
	var rows = tab.rows.length ;//表格列数
//	var cells = tab.rows.item(0).cells.length ;
//	alert("行数"+rows+"列数"+cells);
	var str="";
	var rads;
	for(var i=1;i<rows;i++)
	{	
		var details=document.getElementById("detail"+i).value;
		var classs=document.getElementById("class"+i).value;
		var weights=document.getElementById("weight"+i).value;
		var temp=document.getElementsByName("rad"+i);//仅IE支持
		for(var j=0;j<temp.length;j++)
   		{
      		if(temp[j].checked)
            	rads=temp[j].value;				 
   		}
		str+=details+"-"+classs+"-"+weights+"-"+rads+"\n";
	}
	alert(str);
}

</script>
</head>
<body>
    <form action="" method="post">
   	所获荣誉：
   	<input type="button" value="确定" onClick="show()">      
    <table width="650" border="1" cellspacing="0" bordercolor="#553366" id="tb">
    <tr>
    <th width="321">具体名称</th>
    <th width="82">级别</th>
    <th width="53">权重</th>
 	<th width="119">属于其他类</th>
    <th width="53"> <input type="button" value=" + " onClick="addRow()"> </th>
    </tr>
    </table>
</form>
</body>
</html>