js如何删除指定行？

JavaScript027

js如何删除指定行？,第1张

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

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

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

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

1、自行百度搜索jQuery，然后把jQuery给下载到电脑里面。

2、版本下载完毕。

3、新建一个HTML文件，并且把HTML文件和jQuery放在同一个文件夹里面。

4、使用sublime打开HTML文件，然后用script标签来引入jQuery。如图所示，src后面接的就是jQuery所在的路径。

5、再另外写一个script标签，一定是要另外写，不然待会jQuery不生效的了。

6、在第二个script标签里面写上jQuery的加载函数就可以了。加载函数里面就可以调用jQuery代码了。

<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>