动态表格,点击按钮添加或删除一行 -

yzhp2z

浏览: 13392 次

最近访客更多访客>>

刘彦豪

RyeWhiskey

Jackie_lam

hyjj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

动态表格,点击按钮添加或删除一行

博客分类：

html 动态表格

动态表格点击按钮添加/删除行 js获取td中input的值获取动态表格中input的值

动态表格,点击按钮添加或删除一行

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language='JavaScript'>
var listNum=1;
//新增一行
function add_Row()
{
	var Htmltable=document.getElementById("listtable");	
	listNum++;

	var Htmlrow=Htmltable.insertRow();//新增一行
	var Htmlcell=Htmlrow.insertCell();//新增一列
	Htmlcell.align="left";
	Htmlcell.className="tablehead2";
	Htmlcell.innerHTML="第"+listNum+"行";
	Htmlcell=Htmlrow.insertCell();//新增第二列
	Htmlcell.innerHTML="<input name='text"+listNum+"' id='text"+listNum+"' type='text' style='width: 150px'/>";
	Htmlcell=Htmlrow.insertCell();//新增第三列
	Htmlcell.innerHTML="<a onclick='delete_Row(this)'>删除</a>";
}

//删除某一行
function delete_Row(deleteRow)
{
	var Htmltable=document.getElementById("listtable")
	if(window.confirm("你确定要删除该行数据吗?")==true){
		Htmltable.deleteRow(deleteRow.parentElement.parentElement.rowIndex);
	}  
}

//检查某行的input值是否为空
function check_input()
{
	var Htmltable=document.getElementById("listtable");
	for(var y=0;y<Htmltable.rows.length;y++)
	{
		var H_row=Htmltable.rows[y];
		var inputName=H_row.getElementsByTagName("input");
		if(inputName[0].value==null || inputName[0].value.length==0)
		{
			var aValue=Htmltable.rows[y].cells[0].innerHTML;
			alert(aValue+"不能为空");
			return false;
		}
	}
}

</head>
<body>
<table id="listtable">
    <tr>
        <td width="20%" align="left" class="tablehead2">第一行</td>
        <td width="55%"><input name="text1" id="text1" type="text" style="width: 150px"/></td>
        <td width="25%"><a onclick="delete_Row(this)">删除</a></td>
    </tr>
</table>
</body>
</html>

分享到：