JS 删除Table中的一行

JavaScript023

JS 删除Table中的一行,第1张

<html>

<head>

<title></title>

<script type="text/javascript">

function Goto(){}

function deleteCurrentRow(obj){

var tr=obj.parentNode.parentNode

var tbody=tr.parentNode

tbody.removeChild(tr)

}

</script>

</head>

<body>

<table cellspacing="0" rules="all" bordercolor="#CCCCCC" border="1" id="dgFlowList" style="border-color:#CCCCCCborder-width:1pxborder-style:solidwidth:98%border-collapse:collapseMARGIN: 5px 0px">

<tr class="DataGrid_HeaderStyle" nowrap="nowrap" align="Center">

<td>流程名称</td><td>表单名称</td><td>上传附件</td><td>操作</td>

</tr>

<tr>

<td style="width:35%">请假单1</td>

<td style="width:35%">请假单</td>

<td align="Center" style="width:10%">不允许</td>

<td align="Center" style="width:20%">

<a href="javascript:Goto()" onclick='{if(confirm("确定要删除【请假单1】这个流程吗?")) {deleteCurrentRow(this)}else {}}'>删除</a>

</td>

</tr>

<tr>

<td style="width:35%">请假单2</td>

<td style="width:35%">请假单</td>

<td align="Center" style="width:10%">不允许</td>

<td align="Center" style="width:20%">

<a href="javascript:Goto()" onclick='{if(confirm("确定要删除【请假单2】这个流程吗?")) {deleteCurrentRow(this)}else {}}'>删除</a>

</td>

</tr>

<tr>

<td style="width:35%">请假单3</td>

<td style="width:35%">请假单</td>

<td align="Center" style="width:10%">不允许</td>

<td align="Center" style="width:20%">

<a href="javascript:Goto()" onclick='{if(confirm("确定要删除【请假单3】这个流程吗?")) {deleteCurrentRow(this)}else {}}'>删除</a>

</td>

</tr>

<tr>

<td style="width:35%">请假单4</td>

<td style="width:35%">请假单</td>

<td align="Center" style="width:10%">不允许</td>

<td align="Center" style="width:20%">

<a href="javascript:Goto()" onclick='{if(confirm("确定要删除【请假单4】这个流程吗?")) {deleteCurrentRow(this)}else {}}'>删除</a>

</td>

</tr>

</table>

</body>

</html>

需要准备的材料分别是:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,插入需要的表格。

2、之后在index.html的<script>标签中,输入代码:$('button').click(function () {$(this).parent().parent().remove()})。

3、浏览器运行index.html页面,点击第1行的删除按钮,确实删除了第1行,并且代码不是以行号的形式。

两种方法

1,dataTable.Clear()

2,dataTable.Rows.Clear()

1,dataTable.Clear()和dataTable.Rows.Clear() 都是删除全部的表数据,但不会删除表结构(列信息 ),使用时不必做区分,任选其一都可以。

2,DataTable.Reset方法。将全部数据和表结构(列信息)都删除。

3,用DataRow.Delete()方法删除行后,DataTable的行数不会变,在foreach语句中仍然可以遍历到删除的行,但是不能访问行中的值, 会报System.Data.DeletedRowInaccessibleException的异常。

4,DataTable.GetChanges() 方法也可以取到删除后的行,但是也不能访问行中的值,会报异常。

5,DataTable没有显示实现IDisposable接口,对dataTable.Dispose() 的调用实际上是调用的DataTable的一个父类MarshalByValueComponent的 Dispose() 方法,由于这个原因,Dispose() 方法不会清除DataTable的行数据。因此,如果要完全销毁一个DataTable,可以这样写代码:

1 dataTable.Clear()

2 dataTable.Dispose()

3 dataTable = null