HTML TABLE批量添加行与删除行

表格格式如下:

<table class="page_datalist" id="batch_add_table"> <thead> <tr> <th width="3%">日期</th> <th scope="col" width="2%">开始时间</th> <th scope="col" width="2%">结束时间</th> <th scope="col" width="10%">议题</th> <th scope="col" width="8%">地点</th> <th scope="col" width="20%">内容</th> <th scope="col" width="8%">操作</th> </tr> </thead> <tbody> <tr> <!-- 日期 --> <td align="left"> <input id="date" type="text" name="date" class="Wdate" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" value="" readonly="readonly" /> </td> <!-- 开始时间 --> <td align="left"> <input id="startTime" type="text" name="startTime" class="Wdate" value="" οnfοcus="WdatePicker({dateFmt:'HH:mm'})" readonly="readonly" /> </td> <!-- 结束时间 --> <td align="left"> <input id="endTime" type="text" name="endTime" class="Wdate" value="" οnfοcus="WdatePicker({isShowClear:false,dateFmt:'HH:mm',minDate:'#F{$dp.$D(\'startTime\')||\'2020-10-01\'}'})" readonly="readonly" /> </td> <!-- 议题 --> <td align="left"> <input id="topic" type="text" value="" maxlength="128" /> </td> <!-- 地点 --> <td align="left"> <input id="location" type="text" value="" maxlength="128" /> </td> <!-- 内容 --> <td align="left"> <textarea id="description" rows="1000" cols="40" name="description" style="height:80px;"></textarea> </td> <td align="center"> <a href="javascript:void(0);" onClick="insertRow(this);">添加</a> <a href="javascript:void(0);" onClick="delCurrentRow(this);">删除</a> </td> </tr> </tbody> </table>

对应的JS函数:

/** *删除当前行 */ function delCurrentRow(obj){ if(confirm("确定删除当前议程?")){ if(document.all.batch_add_table.rows.length>2){ var clickedRow=obj; while(clickedRow.tagName!="TR"){ clickedRow=clickedRow.parentNode; } clickedRow.parentNode.removeChild(clickedRow); }else{ alert("此行不能进行删除！"); return; } } } /** *复制当前行并插入到表格中去 */ function insertRow(obj){ //获取当前表格batch_add_table的行总数 var rowNum=document.all.batch_add_table.rows.length; //获取当前表格的行并克隆 var newrow = document.all.batch_add_table.rows[rowNum-1].cloneNode(true); //新行的列数 var colNum=newrow.cells.length; //获取当前行并进行递归循环操作找到当前行的节点 var oldTr=obj; while(oldTr.tagName!="TR"){ oldTr=oldTr.parentNode; } //var oldTr = $("tr:last", $("#batch_add_table")); //var oldTr = $("tr:last", $("#batch_add_table")); //通过JQUERY选择器来获取对应的控件的值 var date= $("#date", oldTr).val(); var startTime= $("#startTime", oldTr).val(); var endTime = $("#endTime", oldTr).val(); if(date==''){ alert('请选择议程日期！'); return ; } if(startTime==''){ alert('请选择议程开始时间！'); return ; } if(endTime==''){ alert('请选择议程结束时间！'); return ; } $("#startTime", newrow).val(endTime); //复制当前行到表格 document.all("batch_add_table").appendChild(newrow); }

彰显JQUERY选择器的优势的几句:

//var oldTr = $("tr:last", $("#batch_add_table")); //var oldTr = $("tr:last", $("#batch_add_table")); //通过JQUERY选择器来获取对应的控件的值 var date= $("#date", oldTr).val(); var startTime= $("#startTime", oldTr).val(); var endTime = $("#endTime", oldTr).val();