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

一、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);

       }); 

猜你喜欢

转载自blog.csdn.net/lmqzhzy/article/details/84235574