html table 批量 修改,HTML TABLE批量添加行与删除行

表格格式如下:

日期开始时间结束时间议题地点内容操作

name="date" class="Wdate"

οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})"

value=""

readonly="readonly" />

type="text" name="startTime" class="Wdate"

value=""

οnfοcus="WdatePicker({dateFmt:'HH:mm'})"

readonly="readonly" />

name="endTime" class="Wdate"

value=""

οnfοcus="WdatePicker({isShowClear:false,dateFmt:'HH:mm',minDate:'#F{$dp.$D(\'startTime\')||\'2020-10-01\'}'})"

readonly="readonly" />

value="" maxlength="128" />

value="" maxlength="128" />

name="description" style="height:80px;">

添加

删除

对应的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();