jquery給table添加行

html代碼html

<!-- 表格   -->
					<div class="table-radius-top" style="width: 95%;margin-left: 2%;margin-top: 2%;">
					
						<div class="inline-block pr15" style="width: 5%; clear: both;margin-top: 4%;"></div>
						<input type="button" class="btn btn-primary" onclick="btn_delete()" name="" value="刪除"/> 
						<input type="button" class="btn btn-primary" onclick="btn_add()" name="" value="新增"/> 
						<input type="button" class="btn btn-primary" onclick="btn_order_add()" name="" value="按訂單新增"/>
						
						<table class="table table-hover table-radius-bordered" id="planTable" style="table-layout:fixed;">	
							<tr id="0" align="center" bgcolor="#66CCCC" onMouseOver="">
								<td width="6%">選擇</td>
								<td width="17%">訂單號</td>
								<td width="15%">應用名稱</td>
								<td width="15%">應用ID</td>
								<td width="47%">投訴應用涉及AP名稱</td>
								<td width="47%">AP代碼</td>
								<td width="100%">訂購發生時間</td>
								<td width="47%">訂購途徑</td>
								<td width="47%">訂購金額</td>
							</tr>
							<tr align="center">
								<td>
									<input type="checkbox" name="chk0">
								</td>
	<!-- 							訂單號 -->
								<td>
									<input name="orderId" type="text" size="8">
								</td>
								
								<!-- 應用名稱 -->
								<td>
									<input name="iappname" placeholder='不超過25個漢字!' type="text" size="8">
								</td>
								
								<!-- 應用id  -->
								<td>
									<input name="appContent" type="text" size="8">
								</td>
								
								<!-- 投訴應用涉及AP名稱 -->
								<td>
									<input name="iapname" type="text" size="8">
								</td>
								
								<!-- AP代碼 -->
								<td>
									<input name="companyCode" type="text" size="8">
								</td>
								
								<!-- 訂購發生時間 -->
								<td>
									<input name="companyCode" type="text" size="8">
								</td>
								<!-- 訂購途徑 -->
								<td>
									<input name="companyCode" type="text" size="8">
								</td>
								<!-- 訂購金額 -->
								<td>
									<input name="ifee" type="text" size="8">
								</td>
							</tr>
						</table>
					</div>

js//動態添加行:app

//動態添加行
		function btn_add(){
			var rows = $("#planTable tr").length;
			var rows = rows-1;
			
			var tr = "<tr id="+rows+" align='center'>"
            +"<td><input type='checkbox' name='chk0'>"+rows+"</td>"
            +"<td><input name='orderId' type='text' size='8'></td>"
            +"<td><input name='iappname' placeholder='不超過25個漢字!' type='text' size='8'></td>"
            +"<td><input name='appContent' type='text' size='8'></td>"
            +"<td><input name='iapname' type='text' size='8'></td>"
            +"<td><input name='companyCode' type='text' size='8'></td>"
            
            +"<td><input name='companyCode' type='text' size='8'></td>"
            
            +"<td><input name='ifee' type='text' size='8'></td>"
            +"<td><input name='ifee' type='text' size='8'></td>"
        	+"</tr>";
        	
			$("#planTable tr:eq("+rows+")").after(tr);
		}

刪除的js代碼this

//刪除選擇的行
		function btn_delete(){
			var ckbs=$("input:checked");
			if(ckbs.size()==0){
		        alert("要刪除指定行,需選中要刪除的行!");
		        return;
		     }
	         ckbs.each(function(){
	              $(this).parent().parent().remove();
	         });
		}
相關文章
相關標籤/搜索