removechild() 方法可从子节点列表中删除某个节点。
如删除成功，此方法可返回被删除的节点，如失败，则返回 null。
语法：
nodeobject.removechild(node)
tr.parentnode.removechild(tr);
看个完整实例
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>动态删除表格</title>
<style>
body{
font-size: 9pt; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px;
}
input {
font-size: 9pt; height: 15pt; width:50px; cursor: default;
}
table{
font-size: 9pt;
word-break:break-all;
cursor: default;
border: black 1px solid;
background-color:#eeeecc;
border-collaps教程e:collapse;
border-color:#999999;
align:center;
}
</style>
<script language="网页特效">
var main_tab= null;
var cur_row = null;
var cur_col = null;
var cur_cell = null;
var org_con = "";
var sort_col = null;var show_col = false;
var charmode= true;
var act_bgc = "#bec5de";
var act_fc = "black";
var cur_bgc = "#ccffcc";
var cur_fc = "black";function init(){
cur_row= null;
cur_col= null;
cur_cell= null;
sort_col= null;
main_tab = powertable;
read_def(main_tab)
main_tab.onmouseo教程ver= overit;
main_tab.onmouseout= outit;
main_tab.onclick= clickit;
main_tab.ondblclick= dblclickit;
org_con= main_tab.outerhtml;
arrowup = document.createelement("span");
arrowup.innerhtml= "5";
arrowup.style.css教程text = "padding-right: 0px; margin-top: -3px; padding-left: 0px; font-size: 10px; margin-bottom: 2px; padding-bottom: 2px; overflow: hidden; width: 10px; color: blue; padding-top: 0px; font-family: webdings; height: 11px";
arrowdown = document.createelement("span");
arrowdown.innerhtml = "6";
arrowdown.style.csstext = "padding-right: 0px; margin-top: -3px; padding-left: 0px; font-size: 10px; margin-bottom: 2px; padding-bottom: 2px; overflow: hidden; width: 10px; color: blue; padding-top: 0px; font-family: webdings; height: 11px";
}
function window.onload(){
init();
/*www.codefans.net*/
drag = document.createelement("div");
drag.innerhtml= "";
drag.style.textalign = "center";
drag.style.position = "absolute";
drag.style.cursor = "hand";
drag.style.border = "1 solid black";
drag.style.display = "none";
drag.style.zindex = "999";
document.body.insertbefore(drag);
setinterval("judge_move()",100);
setinterval("showcontent.value=main_tab.innerhtml;monitor.value='cur_row: '+cur_row+'; cur_col: '+cur_col + '; sort_col: ' +sort_col",1000);
}function judge_move(){
move[0].disabled=(cur_row == null || cur_row<=1);
move[1].disabled=(cur_row == null || cur_row==main_tab.rows.length-1 || cur_row == 0);
move[2].disabled=(cur_col == null || cur_col==0);
move[3].disabled=(cur_col == null || cur_col==main_tab.rows[0].cells.length-1);
}document.onselectstart = function(){return false;}
document.onmouseup = drag_end;
function clear_color(){
the_table=main_tab;
if(cur_col!=null){
for(i=0;i<the_table.rows.length;i++){
with(the_table.rows[i].cells[cur_col]){
style.backgroundcolor=obgc;
style.color=ofc;
}
}
}
if(cur_row!=null){
for(i=0;i<the_table.rows[cur_row].cells.length;i++){
with(the_table.rows[cur_row].cells[i]){
style.backgroundcolor=obgc;
style.color=ofc;
}
}
}
if(cur_cell!=null){
cur_cell.children[0].contenteditable = false;
with(cur_cell.children[0].runtimestyle){
borderleft=bordertop="";
borderright=borderbottom="";
backgroundcolor="";
paddingleft="";
textalign="";
}
}
}function document.onclick(){
window.status = "";
clear_color();
cur_row = null;
cur_col = null;
cur_cell = null;
}function read_def(the_table){
for(var i=0;i<the_table.rows.length;i++){
for(var j=0;j<the_table.rows[i].cells.length;j++){
with(the_table.rows[i]){
cells[j].obgc = cells[j].currentstyle.backgroundcolor;
cells[j].ofc = cells[j].currentstyle.color;
if(i==0){
cells[j].onmousedown = drag_start;
cells[j].onmouseup = drag_end;
}
}
}
}
}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);
}var dragstart = false;
var dragcolstart = null;
var dragcolend = null;function drag_start(){
var the_td = get_element(event.srcelement,"td");
if(the_td==null) return;
dragstart = true;
dragcolstart = the_td.cellindex;
drag.style.width = the_td.offsetwidth;
drag.style.height = the_td.offsetheight;
function document.onmousemove(){
drag.style.display = "";
drag.style.top = event.y - drag.offsetheight/2;
drag.style.left = event.x - drag.offsetwidth/2;
for(var i=0;i<main_tab.rows[0].cells.length;i++){
with(main_tab.rows[0].cells[i]){
if((event.y>offsettop+parseint(document.body.currentstyle.margintop) && event.y<offsettop+offsetheight+parseint(document.body.currentstyle.margintop)) && (event.x>offsetleft+parseint(document.body.currentstyle.marginleft) && event.x<offsetleft+offsetwidth+parseint(document.body.currentstyle.marginleft))){
runtimestyle.backgroundcolor=act_bgc;
dragcolend=cellindex;
}else{
runtimestyle.backgroundcolor="";
}
}
}
if(!(event.y>main_tab.rows[0].offsettop+parseint(document.body.currentstyle.margintop) && event.y<main_tab.rows[0].offsettop+main_tab.rows[0].offsetheight+parseint(document.body.currentstyle.margintop))) dragcolend=null;
}
drag.innerhtml = the_td.innerhtml;
drag.style.backgroundcolor = the_td.obgc;
drag.style.color = the_td.ofc;
}function drag_end(){
dragstart = false;
drag.style.display="none";
drag.innerhtml = "";
drag.style.width = 0;
drag.style.height = 0;
for(var i=0;i<main_tab.rows[0].cells.length;i++){
main_tab.rows[0].cells[i].runtimestyle.backgroundcolor="";
}
if(dragcolstart!=null && dragcolend!=null && dragcolstart!=dragcolend){
change_col(main_tab,dragcolstart,dragcolend);
if(dragcolstart==sort_col)sort_col=dragcolend;
else if(dragcolend==sort_col)sort_col=dragcolstart;
document.onclick();
}
dragcolstart = null;
dragcolend = null;
document.onmousemove=null;
}function clickit(){
event.cancelbubble=true;
var the_obj = event.srcelement;
var i = 0 ,j = 0;
if(cur_cell!=null && cur_row!=0){
cur_cell.children[0].contenteditable = false;
with(cur_cell.children[0].runtimestyle){
borderleft=bordertop="";
borderright=borderbottom="";
backgroundcolor="";
paddingleft="";
textalign="";
}
}
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");
var i = 0;
clear_color();
cur_row = the_tr.rowindex;
cur_col = the_td.cellindex;
if(cur_row!=0){
for(i=0;i<the_tr.cells.length;i++){
with(the_tr.cells[i]){
style.backgroundcolor=cur_bgc;
style.color=cur_fc;
}
}
}else{
if(show_col){
for(i=1;i<the_table.rows.length;i++){
with(the_table.rows[i].cells[cur_col]){
style.backgroundcolor=cur_bgc;
style.color=cur_fc;
}
}
}
the_td.mode = !the_td.mode;
if(sort_col!=null){
with(the_table.rows[0].cells[sort_col])
removechild(lastchild);
}
with(the_table.rows[0].cells[cur_col])
appendchild(the_td.mode?arrowup:arrowdown);
sort_tab(the_table,cur_col,the_td.mode);
sort_col=cur_col;
}
}
}function dblclickit(){
event.cancelbubble=true;
if(cur_row!=0){
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;
cur_cell = the_td;
if(the_td.children.length!=1)
the_td.innerhtml="<div>" + the_td.innerhtml + "</div>";
else if(the_td.children.length==1 && the_td.children[0].tagname.tolowercase()!="div")
the_td.innerhtml="<div>" + the_td.innerhtml + "</div>";
cur_cell.children[0].contenteditable = true;
with(cur_cell.children[0].runtimestyle){
borderright=borderbottom="buttonhighlight 1px solid";
borderleft=bordertop="black 1px solid";
backgroundcolor="#dddddd";
paddingleft="5px";
//textalign="center";
}
}
}
}function overit(){
if(dragstart)return;
var the_obj = event.srcelement;
var i = 0;
if(the_obj.tagname.tolowercase() != "table"){
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");
if(the_tr.rowindex!=0){
for(i=0;i<the_tr.cells.length;i++){
with(the_tr.cells[i]){
runtimestyle.backgroundcolor=act_bgc;
runtimestyle.color=act_fc;
}
}
}else{
for(i=1;i<the_table.rows.length;i++){
with(the_table.rows[i].cells(the_td.cellindex)){
runtimestyle.backgroundcolor=act_bgc;
runtimestyle.color=act_fc;
}
}
if(the_td.mode==undefined)the_td.mode = false;
the_td.style.cursor=the_td.mode?"n-resize":"s-resize";
}
}
}function outit(){
var the_obj = event.srcelement;
var i=0;
if(the_obj.tagname.tolowercase() != "table"){
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");
if(the_tr.rowindex!=0){
for(i=0;i<the_tr.cells.length;i++){
with(the_tr.cells[i]){
runtimestyle.backgroundcolor='';
runtimestyle.color='';
}
}
}else{
var the_table=the_tr.parentelement.parentelement;
for(i=0;i<the_table.rows.length;i++){
with(the_table.rows[i].cells(the_td.cellindex)){
runtimestyle.backgroundcolor='';
runtimestyle.color='';
}
}
}
}
}var charpystr = "";
function judge_cn(char1,char2,mode){
var charset=charmode?charpystr:charbhstr;
for(var n=0;n<(char1.length>char2.length?char1.length:char2.length);n++){
if(char1.charat(n)!=char2.charat(n)){
if(mode) return(charset.indexof(char1.charat(n))>charset.indexof(char2.charat(n))?1:-1);
else return(charset.indexof(char1.charat(n))<charset.indexof(char2.charat(n))?1:-1);
break;
}
}
return(0);
}function sort_tab(the_tab,col,mode){
var tab_arr = new array();
var i;
var start=new date;
for(i=1;i<the_tab.rows.length;i++){
tab_arr.push(new array(the_tab.rows[i].cells[col].innertext.tolowercase(),the_tab.rows[i]));
}
function sortarr(mode) {
return function (arr1, arr2){
var flag;
var a,b;
a = arr1[0];
b = arr2[0];
if(/^(+|-)?d+($|.d+$)/.test(a) && /^(+|-)?d+($|.d+$)/.test(b)){
a=eval(a);
b=eval(b);
flag=mode?(a>b?1:(a<b?-1:0)):(a<b?1:(a>b?-1:0));
}else{
a=a.tostring();
b=b.tostring();
if(a.charcodeat(0)>=19968 && b.charcodeat(0)>=19968){
flag = judge_cn(a,b,mode);
}else{
flag=mode?(a>b?1:(a<b?-1:0)):(a<b?1:(a>b?-1:0));
}
}
return flag;
};
}
tab_arr.sort(sortarr(mode));for(i=0;i<tab_arr.length;i++){
the_tab.lastchild.appendchild(tab_arr[i][1]);
}window.status = " (time spent: " + (new date - start) + "ms)";
}function change_row(the_tab,line1,line2){
the_tab.rows[line1].swapnode(the_tab.rows[line2])
}function change_col(the_tab,line1,line2){
for(var i=0;i<the_tab.rows.length;i++)
the_tab.rows[i].cells[line1].swapnode(the_tab.rows[i].cells[line2]);
}function move_up(the_table){
event.cancelbubble=true;
if(cur_row==null || cur_row<=1)return;
change_row(the_table,cur_row,--cur_row);
}function move_down(the_table){
event.cancelbubble=true;
if(cur_row==null || cur_row==the_table.rows.length-1 || cur_row==0)return;
change_row(the_table,cur_row,++cur_row);
}function move_left(the_table){
event.cancelbubble=true;
if(cur_col==null || cur_col==0)return;
change_col(the_table,cur_col,--cur_col);
if(cur_col==sort_col)sort_col=cur_col+1;
else if(cur_col+1==sort_col)sort_col=cur_col;
}function move_right(the_table){
event.cancelbubble=true;
if(cur_col==null || cur_col==the_table.rows[0].cells.length-1)return;
change_col(the_table,cur_col,++cur_col);
if(cur_col==sort_col)sort_col=cur_col-1;
else if(cur_col-1==sort_col)sort_col=cur_col;
}function add_row(the_table) {
event.cancelbubble=true;
var the_row,the_cell;
the_row = cur_row==null?-1:(cur_row+1);
clear_color();
var newrow=the_table.insertrow(the_row);
for (var i=0;i<the_table.rows[0].cells.length;i++) {
the_cell=newrow.insertcell(i);
the_cell.innertext="newrow_" + the_cell.parentelement.rowindex;
}
read_def(the_table);
}function del_row(the_table) {
if(the_table.rows.length==1) return;
var the_row;
the_row = (cur_row==null || cur_row==0)?-1:cur_row;
the_table.deleterow(the_row);
cur_row = null;
cur_cell=null;
}function add_col(the_table) {
event.cancelbubble=true;
var the_col,i,the_cell;
the_col = cur_col==null?-1:(cur_col+1);
var the_title=prompt("please input the title: ","untitled");
if(the_title==null)return;
if(the_col!=-1 && the_col<=sort_col && sort_col!=null)sort_col++;
the_title=the_title==""?"untitled":the_title
clear_color();
for(var i=0;i<the_table.rows.length;i++){
the_cell=the_table.rows[i].insertcell(the_col);
the_cell.innertext=i==0?the_title:("newcol_" + the_cell.cellindex);
}
read_def(the_table);
}function del_col(the_table) {
if(the_table.rows[0].cells.length==1) return;
var the_col,the_cell;
the_col = cur_col==null?(the_table.rows[0].cells.length-1):cur_col;
if(the_col!=-1 && the_col<sort_col && sort_col!=null)sort_col--;
else if(the_col==sort_col)sort_col=null;
for(var i=0;i<the_table.rows.length;i++) the_table.rows[i].deletecell(the_col);
cur_col = null;
cur_cell=null;
}function res_tab(the_table){
the_table.outerhtml=org_con;
init();
}function exp_tab(the_table){
var the_content="";
document.onclick();
the_content=the_table.outerhtml;
the_content=the_content.replace(/ style="[^"]*"/g,"");
the_content=the_content.replace(/ mode="(false|true)"/g,"");
the_content=the_content.replace(/ obgc="[w#d]*"/g,"");
the_content=the_content.replace(/ ofc="[w#d]*"/g,"");
the_content=the_content.replace(/<div contenteditable=false>([^<]*)</div>/ig,"$1");
the_content="<style>table{font-size: 9pt;word-break:break-all;cursor: default;border: black 1px solid;background-color:#eeeecc;border-collapse:collapse;border-color:#999999;align:center;}</style>n"+the_content;
var newwin=window.open("about:blank","_blank","");
newwin.document.open();
newwin.document.write(the_content);
newwin.document.close();
newwin=null;
}
</script>
<table width=100% border=1 cellspacing=0 cellpadding=2 id="powertable">
<tr align=middle bgcolor=#ffcc00>
<td>first name</td>
<td>last name</td>
<td>team</td>
<td>engine</td>
<td>tyres</td>
<td>fastest lap</td>
<td>国家</td></tr>
<tr>
<td>juan-pablo</td>
<td>montoya</td>
<td>williams</td>
<td>bmw</td>
<td>michelin</td>
<td>1.17.123</td>
<td>柬埔寨</td></tr>
<tr>
<td>david</td>
<td>coulthard</td>
<td>mclaren</td>
<td>mercedes</td>
<td>bridgestone</td>
<td>1.16.423</td>
<td>泰国</td></tr>
<tr>
<td>mika</td>
<td>hakkinen</td>
<td>mclaren</td>
<td>mercedes</td>
<td>bridgestone</td>
<td>1.16.979</td>
<td>越南</td></tr>
<tr>
<td>jarno</td>
<td>trulli</td>
<td>jordan</td>
<td>honda</td>
<td>bridgestone</td>
<td>1.16.459</td>
<td>菲律宾</td></tr>
<tr>
<td>ricardo</td>
<td>zonta</td>
<td>jordan</td>
<td>honda</td>
<td>bridgestone</td>
<td>1.17.328</td>
<td>英国</td></tr>
<tr>
<td>gloria</td>
<td>slap</td>
<td>lotus</td>
<td>renault</td>
<td>michelin</td>
<td>1.15.012</td>
<td>日本</td></tr>
</table><input type=button value=ins_row onclick=add_row(main_tab)>
<input type=button value=ins_col onclick=add_col(main_tab)>
<input type=button value=del_row onclick=del_row(main_tab)>
<input type=button value=del_col onclick=del_col(main_tab)>
<input type=button value=restore onclick=res_tab(main_tab)>
<input type=button value=export onclick=exp_tab(main_tab)>
( move:
<input type=button id=move value=up onclick=move_up(main_tab)>
<input type=button id=move value=down onclick=move_down(main_tab)>
<input type=button id=move value=left onclick=move_left(main_tab)>
<input type=button id=move value=right onclick=move_right(main_tab)> )<span style="cursor:hand; color: red; text-decoration: underline" onclick="if(detail.style.display==''){detail.style.display='none';this.innertext='show detail'}else{detail.style.display='';this.innertext='hide detail'}">show detail</span>
<div id=detail style="display:none">
<input type=text id=monitor size=30 style="width:200px">
<textarea id=showcontent cols=100 rows=20>