js 操作table添加行并赋值、取值、删除选中的行

最新推荐文章于 2024-08-24 09:52:29 发布

lmqzhzy

最新推荐文章于 2024-08-24 09:52:29 发布

阅读量4.1k

点赞数

分类专栏：学习笔记基础回顾文章标签： jsp el表达式 html

本文链接：https://blog.csdn.net/lmqzhzy/article/details/84235574

版权

学习笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

基础回顾

2 篇文章 0 订阅

订阅专栏

一、EL表达式赋值table


<table border="1" width="100%" id="tableID"style="border-collapse:collapse;text-align:center">
			<thead>
				<tr>
				<th>选择</th>
				<th>序号</th>
				<th>商品流水码</th>
				<th>商品身份码</th>
				</tr>
			</thead>			
			<tbody class="rowlist">
				<c:forEach items="${listDetails}" var="lds" varStatus="s">
       			 <tr>
       	 			<td><input type='checkbox' class='check_item'/></td>
       	 			<td >${s.index+1}</td>
       	 			<td> ${lds.productcode}</td>
        		    <td> ${lds.uniquecode}</td>
       			 </tr>
      			</c:forEach>
			</tbody>
			
		</table>

二、通过原生js拼接

//创建表格	
<div  class="weui-cell list" >
	<table border="1" width="98%">
	    <thead>
		<tr>
			<th>序号</th>
			<th>商品流水码</th>
			<th>商品身份码</th>
		</tr>
		</thead>			
		<tbody class="rowlist">
			
		</tbody>
	</table>
</div>


//js(table中的值是扫描添加的，无法手动输入)
<script>
var row = $("tbody").find('tr');
var lastrowcell = $("tbody tr:last-child").find('td');
alert(row.length);
var rowNo = row.length+1;
if(row.length===0){
	var code = barcode.substring(7,barcode.length);
	$("tbody").append("<tr>"+"<td>"+rowNo+"</td>"+"<td>"+code+"</td>");
}else if(lastrowcell.length===2){
	alert(lastrowcell.length);
	var code = barcode.substring(7,barcode.length);
	$("tbody tr:last-child").append("<td>"+code+"</td>");
}else{
	var code = barcode.substring(7,barcode.length);
	$("tbody").append("<tr>"+"<td>"+rowNo+"</td>"+"<td>"+code+"</td>");
}
</script>

三、取出选中行的值，并删除此行

ids = [];

$.each($('input:checkbox:checked'),function(){
n = $(this).parents("tr").index(); // 获取checkbox所在行的顺序
$("table#tableID").find("tr:eq("+n+")").remove();
id =$(this).val();

ids.push(id);

});