js操作table(增加行，删除行，上移，下移，复制行)
改造一个老项目的浏览器兼容性问题，没有引用jquery，涉及table的常用操作，贴代码备忘。
<!doctype html> <html lang="en"> <head> <title>表格操作</title> </head> <body> <table> <tr> <td> <input type="button" value="添加行" onclick="javascript: addRow();" title="添加行(Ctrle+Enter)" /> </td> <td> <input type="button" value="删除行" onclick="javascript: delRow();" title="删除行(Ctrle+Del)" /> </td> <td> <input type="button" value="上移行" onclick="javascript: MoveUp();" title="上移行(Ctrle+U)" /> </td> <td> <input type="button" value="下移行" onclick="javascript: MoveDown();" title="下移行(Ctrle+D)" /> </td> <td> <input type="button" value="复制当前行" onclick="javascript: copyRow();" title="复制当前行(Ctrle+D)" /> </td> <td> <input type="button" value="复制最后行" onclick="javascript: copyLastRow();" title="复制最后行(Ctrle+D)" /> </td> </tr> </table> <table id="DetailTable"> <tr class="headerCell"> <td><span fieldname="FIELDNAME" datatype="VARCHAR2" datalength="40" linktable="" linkfield="" typepro="S" sql="" sqlfield="" coding="" codingtext="" defaultvalue formula places format_type>显示字段</span></td> <td><span fieldname="FIELDPROMPT" datatype="VARCHAR2" datalength="40" linktable="" linkfield="" typepro="S" sql="" sqlfield="" coding="" codingtext="" defaultvalue formula places format_type>对应提示字段</span></td> <td><span fieldname="FIELDTYPE" datatype="VARCHAR2" datalength="40" linktable="字段类型" linkfield="" typepro="C" sql="" sqlfield="" coding="T,B,C,L,F,N,D,S" codingtext="T,B,C,L,F,N,D,S" defaultvalue formula places format_type>字段类型</span></td> <td><span fieldname="LINKTABLE" datatype="VARCHAR2" datalength="40" linktable="" linkfield="" typepro="S" sql="" sqlfield="" coding="" codingtext="" defaultvalue formula places format_type>链接表</span></td> <td><span fieldname="LINKFIELD" datatype="VARCHAR2" datalength="40" linktable="" linkfield="" typepro="S" sql="" sqlfield="" coding="" codingtext="" defaultvalue formula places format_type>链接字段</span></td> <td><span fieldname="LINKPHRASE" datatype="VARCHAR2" datalength="40" linktable="" linkfield="" typepro="S" sql="" sqlfield="" coding="" codingtext="" defaultvalue formula places format_type>下拉字段</span></td> <td><span fieldname="DEFAULTVALUE" datatype="VARCHAR2" datalength="100" linktable="" linkfield="" typepro="S" sql="" sqlfield="" coding="" codingtext="" defaultvalue formula places format_type>默认值</span></td> </tr> <tr class="MAINTR"> <td><input name="DetailTable_10" type="text" id="DetailTable_10" value="开始日期" class="line" maxlength="40" /></td> <td><input name="DetailTable_11" type="text" id="DetailTable_11" value="SDATE" class="line" maxlength="40" /></td> <td><SELECT id="DetailTable_12" name="DetailTable_12"><OPTION value="T">T</OPTION><OPTION value="B">B</OPTION><OPTION value="C">C</OPTION><OPTION value="L">L</OPTION><OPTION value="F">F</OPTION><OPTION value="N">N</OPTION><OPTION value="D" selected>D</OPTION><OPTION value="S">S</OPTION></SELECT></td> <td><input name="DetailTable_13" type="text" id="DetailTable_13" class="line" maxlength="40" /></td> <td><input name="DetailTable_14" type="text" id="DetailTable_14" class="line" maxlength="40" /></td> <td><input name="DetailTable_15" type="text" id="DetailTable_15" class="line" maxlength="40" /></td> <td><input name="DetailTable_16" type="text" id="DetailTable_16" class="line" maxlength="100" /></td> </tr> <tr class="MAINTR"> <td><input name="DetailTable_20" type="text" id="DetailTable_20" value="结束日期" class="line" maxlength="40" /></td> <td><input name="DetailTable_21" type="text" id="DetailTable_21" value="EDATE" class="line" maxlength="40" /></td> <td><SELECT id="DetailTable_22" name="DetailTable_22"><OPTION value="T">T</OPTION><OPTION value="B">B</OPTION><OPTION value="C">C</OPTION><OPTION value="L">L</OPTION><OPTION value="F">F</OPTION><OPTION value="N">N</OPTION><OPTION value="D" selected>D</OPTION><OPTION value="S">S</OPTION></SELECT></td> <td><input name="DetailTable_23" type="text" id="DetailTable_23" class="line" maxlength="40" /></td> <td><input name="DetailTable_24" type="text" id="DetailTable_24" class="line" maxlength="40" /></td> <td><input name="DetailTable_25" type="text" id="DetailTable_25" class="line" maxlength="40" /></td> <td><input name="DetailTable_26" type="text" id="DetailTable_26" class="line" maxlength="100" /></td> </tr> <tr class="MAINTR"> <td><input name="DetailTable_30" type="text" id="DetailTable_30" value="生产班别" class="line" maxlength="40" /></td> <td><input name="DetailTable_31" type="text" id="DetailTable_31" value="BANCI" class="line" maxlength="40" /></td> <td><SELECT id="DetailTable_32" name="DetailTable_32"><OPTION value="T">T</OPTION><OPTION value="B">B</OPTION><OPTION value="C" selected>C</OPTION><OPTION value="L">L</OPTION><OPTION value="F">F</OPTION><OPTION value="N">N</OPTION><OPTION value="D">D</OPTION><OPTION value="S">S</OPTION></SELECT></td> <td><input name="DetailTable_33" type="text" id="DetailTable_33" class="line" maxlength="40" /></td> <td><input name="DetailTable_34" type="text" id="DetailTable_34" class="line" maxlength="40" /></td> <td><input name="DetailTable_35" type="text" id="DetailTable_35" value="生产班别" class="line" maxlength="40" /></td> <td><input name="DetailTable_36" type="text" id="DetailTable_36" class="line" maxlength="100" /></td> </tr> <tr class="MAINTR"> <td><input name="DetailTable_40" type="text" id="DetailTable_40" value="年度" class="line" maxlength="40" /></td> <td><input name="DetailTable_41" type="text" id="DetailTable_41" value="NIANDU" class="line" maxlength="40" /></td> <td><SELECT id="DetailTable_42" name="DetailTable_42"><OPTION value="T">T</OPTION><OPTION value="B">B</OPTION><OPTION value="C" selected>C</OPTION><OPTION value="L">L</OPTION><OPTION value="F">F</OPTION><OPTION value="N">N</OPTION><OPTION value="D">D</OPTION><OPTION value="S">S</OPTION></SELECT></td> <td><input name="DetailTable_43" type="text" id="DetailTable_43" class="line" maxlength="40" /></td> <td><input name="DetailTable_44" type="text" id="DetailTable_44" class="line" maxlength="40" /></td> <td><input name="DetailTable_45" type="text" id="DetailTable_45" value="年份" class="line" maxlength="40" /></td> <td><input name="DetailTable_46" type="text" id="DetailTable_46" class="line" maxlength="100" /></td> </tr> <tr class="MAINTR"> <td><input name="DetailTable_50" type="text" id="DetailTable_50" value="客户" class="line" maxlength="40" /></td> <td><input name="DetailTable_51" type="text" id="DetailTable_51" value="KEHU" class="line" maxlength="40" /></td> <td><SELECT id="DetailTable_52" name="DetailTable_52"><OPTION value="T">T</OPTION><OPTION value="B">B</OPTION><OPTION value="C" selected>C</OPTION><OPTION value="L">L</OPTION><OPTION value="F">F</OPTION><OPTION value="N">N</OPTION><OPTION value="D">D</OPTION><OPTION value="S">S</OPTION></SELECT></td> <td><input name="DetailTable_53" type="text" id="DetailTable_53" class="line" maxlength="40" /></td> <td><input name="DetailTable_54" type="text" id="DetailTable_54" class="line" maxlength="40" /></td> <td><input name="DetailTable_55" type="text" id="DetailTable_55" value="客户名称" class="line" maxlength="40" /></td> <td><input name="DetailTable_56" type="text" id="DetailTable_56" class="line" maxlength="100" /></td> </tr> </table> <script type="text/javascript"> var cur_row = null; window.onload = function () { DetailTable.onclick = function () { event.cancelBubble = true; var the_obj = event.srcElement; if (the_obj.tagName.toLowerCase() != "table" && the_obj.tagName.toLowerCase() != "tbody" && the_obj.tagName.toLowerCase() != "tr") { var the_td = get_Element(the_obj, "td"); if (the_td == null) return; var the_tr = the_td.parentElement; var the_table = get_Element(the_td, "table"); cur_row = the_tr.rowIndex; cur_col = the_td.cellIndex; } } } function get_Element(the_ele, the_tag) { the_tag = the_tag.toLowerCase(); if (the_ele.tagName.toLowerCase() == the_tag) return the_ele; while (the_ele = the_ele.offsetParent) { if (the_ele.tagName.toLowerCase() == the_tag) return the_ele; } return (null); } function MoveUp() { var table = document.getElementById('DetailTable'); if (cur_row == null) { alert("请选择要复制的行"); } else { if (table.rows[cur_row].rowIndex > 1) { SwapNode(table.rows[cur_row], table.rows[cur_row].previousSibling); } else { alert("已经置顶了"); } } } function MoveDown() { var table = document.getElementById('DetailTable'); if (cur_row == null) { alert("请选择要复制的行"); } else { if (table.rows[cur_row].rowIndex < table.rows.length - 1) { SwapNode(table.rows[cur_row], table.rows[cur_row].nextSibling); } else { alert("已经置底了") } } } function SwapNode(row1, row2) { var _parent = row1.parentNode; var _t1 = row1.nextSibling; var _t2 = row2.nextSibling; if (_t1) _parent.insertBefore(row2, _t1); else _parent.appendChild(node2); if (_t2) _parent.insertBefore(row1, _t2); else _parent.appendChild(row1); } function copyRow() { var the_table = document.getElementById('DetailTable'); if (cur_row == null) { alert("请选择要复制的行"); } else { the_table.appendChild(the_table.rows[cur_row].cloneNode(true)); } } function copyLastRow() { var the_table = document.getElementById('DetailTable'); the_row = the_table.rows.length - 1; if (the_table.rows.length == 1) { alert("请至少添加一行数据"); return; } the_table.appendChild(the_table.rows[the_row].cloneNode(true)); } function delRow() { if (document.all.DetailTable.rows.length == 1) return; var the_row; the_row = (cur_row == null || cur_row == 0) ? -1 : cur_row; document.all.DetailTable.deleteRow(the_row); cur_row = null; cur_cell = null; } function addRow() { var the_table = document.getElementById('DetailTable'); var the_row, the_cell, linktype, linklength; var newrow; if (cur_row == null) { the_row = the_table.rows.length; newrow = the_table.insertRow(the_row); rowcount = the_row + 1; } else { newrow = the_table.insertRow(cur_row + 1); rowcount = the_row + 1; } newrow.height = "20"; newrow.className = "MAINTR"; for (var i = 0; i < the_table.rows[0].cells.length; i++) { the_cell = newrow.insertCell(i); linktype = the_table.rows[0].cells[i].children[0].getAttribute("typepro"); linklength = the_table.rows[0].cells[i].children[0].getAttribute("datalength"); linktable = the_table.rows[0].cells[i].children[0].getAttribute("linktable"); linkfield = the_table.rows[0].cells[i].children[0].getAttribute("linkfield"); if (linktype == "L") { the_cell.innerHTML = "<input type='text' id=\"DetailTable_" + rowcount + "" + i + "\" name=\"DetailTable_" + rowcount + "" + i + "\"' class='line' maxlength='" + linklength + "' AUTOCOMPLETE='on'><input type='button' onclick='javascript:Open_win(this,\"" + linktable + "\",\"" + linkfield + "\");' style='BACKGROUND:url(../images/find.gif);height:20px;WIDTH:20PX;CURSOR:hand;'> "; } if (linktype == "D") { the_cell.innerHTML = "<input id=\"DetailTable_" + rowcount + "" + i + "\" name=\"DetailTable_" + rowcount + "" + i + "\" onfocus=\"return showCalendar('DetailTable_" + rowcount + "" + i + "', '%Y-%m-%d %H:%M:%S','24',true);\" /><input type='button' title=\"日期选择\" onclick=\"return showCalendar('DetailTable_" + rowcount + "" + i + "', '%Y-%m-%d %H:%M:%S','24',true);\" style='background:url(../images/INT_CALENDAR.gif); width:22px;height:22px;cursor:hand;'/> "; } if (linktype == "C") { var aaa = the_table.rows[0].cells[i].children[0].getAttribute("coding").split(","); var bbb = the_table.rows[0].cells[i].children[0].getAttribute("codingtext").split(","); var arr = new Array(aaa.length); for (var j = 0; j < aaa.length; j++) { arr[j] = "<OPTION value=\"" + aaa[j] + "\">" + bbb[j] + "</OPTION>"; } the_cell.innerHTML = "<SELECT id=\"DetailTable_" + rowcount + "" + i + "\" name=\"DetailTable_" + rowcount + "" + i + "\">" + arr.join("") + "</SELECT>"; } if (linktype == "B") { the_cell.innerHTML = "<input id=\"DetailTable_" + rowcount + "" + i + "\" name=\"DetailTable_" + rowcount + "" + i + "\" type=\"checkbox\"/>"; } if (linktype == "P") { the_cell.innerHTML = "<input id=\"DetailTable_" + rowcount + "" + i + "\" name=\"DetailTable_" + rowcount + "" + i + "\" type='text' class='line' maxlength='" + linklength + "' AUTOCOMPLETE='on'>"; } if (linktype == "F") { the_cell.innerHTML = "<a id=\"DetailTable_" + rowcount + "" + i + "\" target=\"_blank\" style=\"visibility:hidden\"></a><img title=\"文件上传\" onclick=\"javascript:BrowseFile(this);\" src=\"../explore/img/file-up.ico\" style=\"border-width:0px;width:25px;height:22px;cursor:hand;border:none;vertical-align:top;\" />"; } if (linktype == "S") { if (linklength >= 20) { the_cell.innerHTML = "<input id=\"DetailTable_" + rowcount + "" + i + "\" name=\"DetailTable_" + rowcount + "" + i + "\" type='text' class='line' maxlength='" + linklength + "' AUTOCOMPLETE='on'>"; } else { the_cell.innerHTML = "<input id=\"DetailTable_" + rowcount + "" + i + "\" name=\"DetailTable_" + rowcount + "" + i + "\" type='text' class='line' maxlength='" + linklength + "' AUTOCOMPLETE='on'>"; } } if (linktype == "N") { if (linklength >= 20) { the_cell.innerHTML = "<input id=\"DetailTable_" + rowcount + "" + i + "\" name=\"DetailTable_" + rowcount + "" + i + "\" onBlur=\"checkNumber(this)\" type='text' class='line' size='20' AUTOCOMPLETE='on'>"; } else { the_cell.innerHTML = "<input id=\"DetailTable_" + rowcount + "" + i + "\" name=\"DetailTable_" + rowcount + "" + i + "\" onBlur=\"checkNumber(this)\" type='text' class='line' size='" + linklength + "' AUTOCOMPLETE='on'>"; } } } } </script> </body> </html>
