使用JavaScript动态删除单行表格的方法

最新推荐文章于 2021-12-24 12:57:09 发布

chinaemerson

最新推荐文章于 2021-12-24 12:57:09 发布

阅读量176

点赞数

分类专栏： Ajax 文章标签： JavaScript IE Ajax HTML ViewUI

本文链接：https://blog.csdn.net/chinaemerson/article/details/83534958

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近帮同学做一个Ajax小控件，遇到了一个动态删除表格行的问题。经过反复试验后，以下代码在FF和IE（相当鄙视）中均有效：

页面部分：


<html>
	<head>
		<title>Insert title here</title>
		<script type="text/javascript" src="a.js"></script>
	</head>

	<body>
		<table id="tableI" cellpadding="1" cellspacing="1" border="1">
			<tr>
				<td>0a</td>
				<td>aa</td>
				<td><button onclick="a(this)">bbb</button>
			</tr>	

			<tr>
				<td>1a</td>
				<td>aa</td>
			<td><button onclick="a(this)">bbb</button>
			</tr>	

			<tr>
				<td>2a</td>
				<td>aa</td>
				<td><button onclick="a(this)">bbb</button>
			</tr>

			<tr>
				<td>3a</td>
				<td>aa</td>
				<td><button onclick="a(this)">bbb</button>
			</tr>

			<tr>
				<td>4a</td>
				<td>aa</td>
				<td><button onclick="a(this)">bbb</button>
			</tr>

			<tr>
				<td>5a</td>
				<td>aa</td>
				<td><button onclick="a(this)">bbb</button>
			</tr>

			<tr>
				<td>6a</td>
				<td>aa</td>
				<td><button onclick="a(this)">bbb</button>
			</tr>
		</table>
	</body>
</html>

JavaScript部分（a.js）


var tableI;//要找到的table
var trI;//要删除的tr
var index;//tr所在table的index，从0开始

function a(obj) {
	tableI = document.getElementById("tableI");//找到要删除行所在的teble
	trI = obj.parentNode.parentNode;//我的button在tr下的td中，两次执行.parentNode操作，可以找到要删除的tr。

	index = trI.rowIndex;//要删除的tr所在table中的index
	tableI.deleteRow(index);//执行删除
}

chinaemerson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript动态删除单行表格的方法

最近帮同学做一个Ajax小控件，遇到了一个动态删除表格行的问题。经过反复试验后，以下代码在FF和IE（相当鄙视）中均有效：页面部分：[code="HTML"] Insert title here 0a aa bbb 1a aa bbb ...
复制链接

扫一扫

专栏目录