jquery-对表格的增行和删行操作

杰儿__er

于 2023-02-21 15:53:37 发布

阅读量531

点赞数

分类专栏： WEB 文章标签： css jquery html5

本文链接：https://blog.youkuaiyun.com/weixin_42167759/article/details/129144413

版权

WEB 专栏收录该内容

7 篇文章

订阅专栏

功能：jquery实现对表格的新增行和删除行操作。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    function myFunction(){
        var inputx='<tr><td>200</td><td>300</td><td><button type="button"  class="errorRed" onclick="testFun(this)">点我取消本行!</button> </td></tr>';
        $('.active').before(inputx);
    }
    function testFun(_this){
        $(_this).parent('td').parent('tr').hide();
    }    
</script>
</head>
<body>

<p>单击按钮触发函数。</p>
<button onclick="myFunction()">点我新增行</button>
<p id="demo"></p>

<table border="1">
    <tr class="active" >
        <td>100</td>
        <td>300</td>
        <td><button type="button"  class="errorRed" onclick="testFun(this)">点我取消本行!</button> </td>
    </tr>
</table>
</body>
</html>