使用jquery操作table元素：增加或删除一行

最新推荐文章于 2024-08-08 16:36:35 发布

xlight2023

最新推荐文章于 2024-08-08 16:36:35 发布

阅读量1.2w

点赞数 1

文章标签： table jquery button upload input function

本文链接：https://blog.csdn.net/abc_key/article/details/7002443

版权

最近在做一个后台管理系统，需要做上传资源图片的功能，上传图片是默认只有一个上传控件，页面使用table布局，代码片段如下：

<table id="table1" width="80%" border="0" cellpadding="0" cellspacing="0">
    	......
	   	<tr>
    		<td colspan="2"> 应用图片：<input type="file" name="upload" id="upload" size="40" />
    		 <input name="btnAdd" id="btnAdd" type="button" value=" + " />
    		<input name="btnSub" id="btnSub" type="button" value=" - " /></td>
    	</tr>
	    <tr>
    		<td colspan="4" align="center">
    			<input type="button" name="button" οnclick="save()" value="发布"/>  
    			<input type="button" οnclick="back()" value="返回">
    		</td>
    	</tr>
    </table>

需要在点击“+”按钮时就在应用图片所在行的下面新增一行，点击“-”按钮就在增加的行中从下往上删除一行，我选择用jquery来实现，因为使用jquery来实现比较简单，js代码如下：

//增加或减少上传图片
$(document).ready(function(){
	//add method
	$("#btnAdd").click(function(){
		var $table = $("#table1 tr");//获取table的tr集合
		var len = $table.length;//获取table的行数
		$("#table1").append("<tr id=" + len + ">" + 
				"<td  colspan='2'>" + 
				" 应用图片：<input type='file' name='upload' id='upload' size='40' />" + 
				"</td>" + "</tr>");
	});
	
	//sub method
	$("#btnSub").click(function(){
		var len = $("#table1 tr").length;
		if(len > 1)
			$("tr[id='"+(len-1)+"']").remove();
	});
});

使用$("#table1").append("...");就是在id为table1的表格的最后追加一行，如果需要在制定的行下面添加一行

：$("#tr0").append("...");tr0就是制定行的id。