使用JQery编写表格的动态增删

太过爱你忘了你带给我的痛 2022-07-16 00:29 107阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>动态增删表格</title>
    <script src="jquery-2.1.1.js"></script>
    <script>
    	function addRow(){
    		var table=$("#myTable");
    		var str="<tr><td><input type='checkbox' /></td><td><input type='text' /></td></tr>";
    		table.append(str);
    	}
    	
    	function delRow(){
    		var trs=$("#myTable tr");
    		var isDel;
    		for(var i=1;i<trs.length;i++){
    			isDel=trs.eq(i).children().eq(0).children();
    			if(isDel.is(":checked")){
    				trs.eq(i).remove();
    			}
    		}
    	}
    </script>
    </head>
    
    <body>
    	<div>
            <table id="myTable" border="1px" align="center">
                <tr>
                    <td>选择</td>
                    <td>内容</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td><input type="text" /></td>
                </tr>
            </table>
        </div>
        <div align="center" style="margin-top:10px">
            <button onClick="addRow()">增加</button>
        	<button onClick="delRow()">删除</button>
        </div>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读

相关 QT编写QTablewidget的表格代码

代码如下：导入 PyQT5 中的 QTableWidget 模块 from PyQt5.QtWidgets import QTableWidget, QT

素颜马尾好姑娘i/ 2024年03月23日 15:10/ 0 赞/ 97 阅读

相关 js实现表格数据的增删

效果图如下：![在这里插入图片描述][2020032915384212.gif] <!DOCTYPE html> <html lang="en">

系统管理员/ 2023年07月19日 04:46/ 0 赞/ 3 阅读

相关 jQery基础学习的笔记

jQery基础学习的笔记多库共存问题释放$的作用 > var my![=][equation_tex_3D].noConflict(); 此时的![只是一

秒速五厘米/ 2022年10月01日 08:00/ 0 赞/ 125 阅读

相关 JavaScript动态增删改表格数据

1. <!DOCTYPE html> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <h

朴灿烈づ我的快乐病毒、/ 2022年08月05日 02:23/ 0 赞/ 170 阅读

相关 JQery操作DOM

读写节点（）没有参数就是取值，有参数就是赋值读写节点的HTML内容 obj.html() / obj.html(“123”) 读写节点的文本内容 obj.te

╰半夏微凉°/ 2022年07月16日 05:28/ 0 赞/ 160 阅读

相关使用JQery编写表格的动态增删

<!doctype html> <html> <head> <meta charset="utf-8"> <title>动态增删表格</

太过爱你忘了你带给我的痛/ 2022年07月16日 00:29/ 0 赞/ 108 阅读

相关 jqery 动态追加删减

![20171220144725709][] jsp <form name="Form" id="Form"> <i

本是古典何须时尚/ 2022年06月03日 05:59/ 0 赞/ 183 阅读

相关 2：表格增删改

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

小灰灰/ 2022年04月22日 22:54/ 0 赞/ 186 阅读

相关 Markdown编写表格模板

作者：LoveEmperor-王子様 Markdown编写表格模板 > 在编写表格时，很容易格式错误，与用错标题标签，在这里记录下模板写法：

电玩女神/ 2022年04月17日 07:11/ 0 赞/ 361 阅读

相关 JavaScript 表格的增删改查

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c

深藏阁楼爱情的钟/ 2021年12月05日 02:34/ 0 赞/ 251 阅读