在页面table中通过按钮控制增加或删除一行tr

我不是女神ヾ 2022-05-08 11:00 414阅读 0赞

效果图

![70][]

点击添加即出现新的一行空白数据，并赋值id；删除是根据checkbox选中一个或多个删除；

废话不多说，直接上代码，相信大家可以看懂；

html部分

<div class="zl-sqrxx-con">
                <table id="addCourse">
                    <tr>
                        <td>课题名称</td>
                        <td>课题编号</td>
                        <td>课题负责人</td>  
                    </tr>
                </table>
                <div class="btn-l">
            <a href="javascript:void(0);" class='submit-btn' onclick="addCourse()">添加关联课题</a>
            <a href="javascript:void(0);" class='back-btn' onclick="deleteCourse()">删除关联课题</a>
    			</div>
      </div>

js部分

<script>
     var y = 0;
    	function addCourse(){
    		y++;
    		var result ="";
    		var str = "str"+y
    		var courseName ="courseName"+y
    		var courseNum = "courseNum"+y
    		var courseUser = "courseUser"+y
    		result += "<tr class="+str+"><td><input type='checkbox' name='check' value="+str+"><input type='text' id="+courseName+"></td>";
    		result +="<td><input type='text' id="+courseNum+"></td><td><input type='text' id="+courseUser+"></td></tr>"
    			 $("#addCourse").append(result);
    	}
    	function deleteCourse(){
    		var checks=$("input[name='check']");
    	    for(var y=0;y<checks.length;y++){
    	        if(checks[y].checked){
    	        	var a = checks[y].value;
    	        	$("."+a).remove();
    	        }
    	    }   
    	}
    </script>

以上就是实现整个增加与删除的代码。如果有什么问题欢迎指出与讨论；

[70]: /images/20220508/998b04ef727c41db99b1847baa048ae8.png

发表评论取消回复

表情：

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

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

相关阅读

相关 js动态增加，删除td，tr，table，div

js实现的动态添加，删除table内容：截图如下： 1. ![SouthEast][] 2. ![SouthEast 1][] 源代码： main.css

川长思鸟来/ 2024年02月17日 14:15/ 0 赞/ 59 阅读

相关 jquery实现jsp中的table中行tr的增加和删除

本文实例为大家分享了使用jquery实现jsp中的table中行tr的增加和删除。 1.jsp页面代码如下（示例）： <input class="u-btn

小鱼儿/ 2023年10月05日 21:47/ 0 赞/ 14 阅读

相关 Numpy中如何给矩阵增加一行或一列

使用Python的numpy的array结构，如何给矩阵增加一行或者一列呢？下面提供一种方法，当然numpy还提供了很多API函数可供选择。 ![numpy][]

落日映苍穹つ/ 2022年08月21日 00:09/ 0 赞/ 207 阅读

相关动态添加删除table页面一行input表格

之前写过两篇关于HTML页面[添加结点][Link 1]，[删除结点][Link 2]的博文。今天偶然看到一个网友询问JSP页面上动态给表格增加行，删除行，碰

柔情只为你懂/ 2022年08月07日 14:46/ 0 赞/ 304 阅读

相关 js在table中添加tr，删除最后一个tr

function addTable(){ var oTab = document.getElementById('tables'); v

本是古典何须时尚/ 2022年05月13日 07:12/ 0 赞/ 419 阅读

相关在页面table中通过按钮控制增加或删除一行tr

效果图 ![70][] 点击添加即出现新的一行空白数据，并赋值id；删除是根据checkbox选中一个或多个删除；废话不多说，直接上代码，相信大家可以看懂； html

我不是女神ヾ/ 2022年05月08日 11:00/ 0 赞/ 415 阅读

相关 ORACLE中通过SQL语句(alter table)来增加、删除、修改字段

目录 1.添加字段： 2.添加备注： 3.修改字段类型： 4.删除字段： -------------------- 1.添加字段： alter tabl

Love The Way You Lie/ 2022年05月05日 18:28/ 0 赞/ 1177 阅读

相关 js练习------表格的增加tr删除tr（2）

（1）的方法太麻烦了所以可以直接用 innerHTML的方法来创建一个tr ![1451961-20180728110559068-212439299.png][]

Dear 丶/ 2021年09月20日 13:10/ 0 赞/ 332 阅读

相关 table增加行，删除行

【需求】：设置按钮增加行，删除行【代码】： <input type="button" value="添加行" onclick="addtr()"> <ta

妖狐艹你老母/ 2021年09月19日 15:08/ 0 赞/ 551 阅读

相关在el-data-table中增加一个额外按钮，用于其他操作

在el-data-table中增加一个额外按钮，用于其他操作 1. 在操作列中加入额外按钮 extraButtons: [ {

川长思鸟来/ 2021年07月25日 14:35/ 0 赞/ 794 阅读