JS Tr.parentNode.removeChild (TR); Delete table rows

The RemoveChild () method deletes a node from the list of child nodes.

If the deletion succeeds, this method returns the deleted node, or null if it fails.

Grammar:
Nodeobject.removechild (node)

tr.parentnode.removechild (TR);

Look at a complete example

<meta http-equiv= "Content-type" content= "text/html"
<title> dynamic Delete Table charset=gb2312
<style>
body{
 font-size:9pt; padding-right:0px; padding-left:0px; padding-bottom:0px; pa dding-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 Tutorial E:collapse;
 border-color: #999999;
 align:center;
}
</style>
<script language= "Web Effects"
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 tutorial 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 Tutorial 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&lt;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&lt;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&lt;main_tab.rows[0].cells.length;i++) {


With (Main_tab.rows[0].cells[i]) {


if (Event.y&gt;offsettop+parseint (document.body.currentstyle.margintop) &amp;&amp; event.y&lt;offsettop+ Offsetheight+parseint (Document.body.currentstyle.margintop)) &amp;&amp; (Event.x&gt;offsetleft+parseint ( Document.body.currentstyle.marginleft) &amp;&amp; Event.x&lt;offsetleft+offsetwidth+parseint ( Document.body.currentstyle.marginleft))) {


RUNTIMESTYLE.BACKGROUNDCOLOR=ACT_BGC;


Dragcolend=cellindex;


}else{


Runtimestyle.backgroundcolor= "";


}


}


}


if (!) ( Event.y&gt;main_tab.rows[0].offsettop+parseint (document.body.currentstyle.margintop) &amp;&amp; Event.y&lt;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 &amp;&amp; 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" &amp;&amp; the_obj.tagname.tolowercase ()!= "Tbody" &amp;&amp; The_obj.tag Name.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&lt;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&lt;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" &amp;&amp; the_obj.tagname.tolowercase ()!= "Tbody" &amp;&amp; The_obj.tag Name.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= "&lt;div&gt;" + the_td.innerhtml + "&lt;/div&gt;";


else if (the_td.children.length==1 &amp;&amp; the_td.children[0].tagname.tolowercase ()!= "div")


The_td.innerhtml= "&lt;div&gt;" + the_td.innerhtml + "&lt;/div&gt;";


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&lt;the_tr.cells.length;i++) {


With (The_tr.cells[i]) {


RUNTIMESTYLE.BACKGROUNDCOLOR=ACT_BGC;


Runtimestyle.color=act_fc;


}


}


}else{


for (i=1;i&lt;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&lt;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&lt;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&lt;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) &amp;&amp;/^ (+|-) d+ ($|. d+$)/.test (b)) {


A=eval (a);


B=eval (b);


Flag=mode? (a&gt;b?1: (a&lt;b?-1:0)):( A&lt;b?1: (a&gt;b?-1:0));


}else{


A=a.tostring ();


B=b.tostring ();


if (a.charcodeat (0) &gt;=19968 &amp;&amp; b.charcodeat (0) &gt;=19968) {


Flag = JUDGE_CN (A,b,mode);


}else{


Flag=mode? (a&gt;b?1: (a&lt;b?-1:0)):( A&lt;b?1: (a&gt;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 (/&lt;div contenteditable=false&gt; ([^&lt;]*) &lt;/div&gt;/ig, "$");


the_content= "&lt;style&gt;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;} &lt;/style&gt;n "+the_content;


var newwin=window.open ("About:blank", "_blank", "");


Newwin.document.open ();


Newwin.document.write (the_content);


Newwin.document.close ();


Newwin=null;


}


&lt;/script&gt;


&lt;table width=100% border=1 cellspacing=0 cellpadding=2 id= "Powertable" &gt;


&LT;TR align=middle bgcolor= #ffcc00 &gt;


&lt;td&gt;first name&lt;/td&gt;


&lt;td&gt;last name&lt;/td&gt;


&lt;td&gt;team&lt;/td&gt;


&lt;td&gt;engine&lt;/td&gt;


&lt;td&gt;tyres&lt;/td&gt;


&lt;td&gt;fastest lap&lt;/td&gt;


&lt;td&gt; National &lt;/td&gt;&lt;/tr&gt;


&lt;tr&gt;


&lt;td&gt;juan-pablo&lt;/td&gt;


&lt;td&gt;montoya&lt;/td&gt;


&lt;td&gt;williams&lt;/td&gt;


&lt;td&gt;bmw&lt;/td&gt;


&lt;td&gt;michelin&lt;/td&gt;


&lt;td&gt;1.17.123&lt;/td&gt;


&lt;td&gt; Cambodia &lt;/td&gt;&lt;/tr&gt;


&lt;tr&gt;


&lt;td&gt;david&lt;/td&gt;


&lt;td&gt;coulthard&lt;/td&gt;


&lt;td&gt;mclaren&lt;/td&gt;


&lt;td&gt;mercedes&lt;/td&gt;


&lt;td&gt;bridgestone&lt;/td&gt;


&lt;td&gt;1.16.423&lt;/td&gt;


&lt;td&gt; Thailand &lt;/td&gt;&lt;/tr&gt;


&lt;tr&gt;


&lt;td&gt;mika&lt;/td&gt;


&lt;td&gt;hakkinen&lt;/td&gt;


&lt;td&gt;mclaren&lt;/td&gt;


&lt;td&gt;mercedes&lt;/td&gt;


&lt;td&gt;bridgestone&lt;/td&gt;


&lt;td&gt;1.16.979&lt;/td&gt;


&lt;td&gt; Vietnam &lt;/td&gt;&lt;/tr&gt;


&lt;tr&gt;


&lt;td&gt;jarno&lt;/td&gt;


&lt;td&gt;trulli&lt;/td&gt;


&lt;td&gt;jordan&lt;/td&gt;


&lt;td&gt;honda&lt;/td&gt;


&lt;td&gt;bridgestone&lt;/td&gt;


&lt;td&gt;1.16.459&lt;/td&gt;


&lt;td&gt; Philippines &lt;/td&gt;&lt;/tr&gt;


&lt;tr&gt;


&lt;td&gt;ricardo&lt;/td&gt;


&lt;td&gt;zonta&lt;/td&gt;


&lt;td&gt;jordan&lt;/td&gt;


&lt;td&gt;honda&lt;/td&gt;


&lt;td&gt;bridgestone&lt;/td&gt;


&lt;td&gt;1.17.328&lt;/td&gt;


&lt;td&gt; UK &lt;/td&gt;&lt;/tr&gt;


&lt;tr&gt;


&lt;td&gt;gloria&lt;/td&gt;


&lt;td&gt;slap&lt;/td&gt;


&lt;td&gt;lotus&lt;/td&gt;


&lt;td&gt;renault&lt;/td&gt;


&lt;td&gt;michelin&lt;/td&gt;


&lt;td&gt;1.15.012&lt;/td&gt;


&lt;td&gt; Japan &lt;/td&gt;&lt;/tr&gt;


&lt;/table&gt;

<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& nbsp 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>