admin管理员组

文章数量:1422296

i have to switch in between two table as per users choice i can do it using table object model but there is problem with it as i remove one table and load another it will work but next time when i have switch back to first it will not get table ids and its not working.

while working with DOM like this

var tbl1  = document.createElement("table");

tbl1.setAttribute('id','shorttable');

for delete i am using below java script

var b = document.getElementById('shorttable');

document.removeChild(b);

but giving me exception

uncaught Error: NOT_FOUND_ERR: DOM Exception

is there any way to do this using DOM?

@lonesomeday thanks for ur reply but its not working when i call it from other function? what i am trying is like this. 

  <html>
  <head>
  <title>test dom</title>
  <script>

  function trackmode() 
{
    // i have to delete other table from this function where it is not working  
    var b = document.getElementById('shorttable');
    alert(b);
    b.parentNode.removeChild(b);

    var body = document.getElementsByTagName("body")[0];


    // creates a <table> element and a <tbody> element
    var tbl     = document.createElement("table");
    tbl.setAttribute('id','tracktable');
    var tblBody = document.createElement("tbody");

    // creating all cells
    for (var j = 0; j < 2; j++) {
        // creates a table row
        var row = document.createElement("tr");

        for (var i = 0; i < 2; i++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            var cellText = document.createTextNode("cell is row "+j+", column "+i);
            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);
    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
}


function shortenmode() 
{

     var b = document.getElementById('tracktable');
b.parentNode.removeChild(b);

    var body1 = document.getElementsByTagName("body")[0];
    // creates a <table> element and a <tbody> element
    var tbl1  = document.createElement("table");
    tbl1.setAttribute('id','shorttable');
    var tblBody1 = document.createElement("tbody");

    // creating all cells
    for (var j = 0; j < 2; j++) {
        // creates a table row
        var row = document.createElement("tr");

        for (var i = 0; i < 2; i++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            var cellText = document.createTextNode("cell is row "+j+", column "+i);
            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody1.appendChild(row);
    }

    // put the <tbody> in the <table>
    tbl1.appendChild(tblBody1);
    // appends <table> into <body>
    body1.appendChild(tbl1);
    // sets the border attribute of tbl to 2;
    tbl1.setAttribute("border", "2");

         //here it will work
    //var b = document.getElementById('shorttable');
    //alert(b);
    //b.parentNode.removeChild(b);

    //myP.removeChild(myTextNode);
}


  </script>
  </head>
  <body >
 <button type="button" name="website" onclick=trackmode() > track</button>
 <button type="button" name="website1" onclick=shortenmode() > short </button>
 </body>
</html>

i have to switch in between two table as per users choice i can do it using table object model but there is problem with it as i remove one table and load another it will work but next time when i have switch back to first it will not get table ids and its not working.

while working with DOM like this

var tbl1  = document.createElement("table");

tbl1.setAttribute('id','shorttable');

for delete i am using below java script

var b = document.getElementById('shorttable');

document.removeChild(b);

but giving me exception

uncaught Error: NOT_FOUND_ERR: DOM Exception

is there any way to do this using DOM?

@lonesomeday thanks for ur reply but its not working when i call it from other function? what i am trying is like this. 

  <html>
  <head>
  <title>test dom</title>
  <script>

  function trackmode() 
{
    // i have to delete other table from this function where it is not working  
    var b = document.getElementById('shorttable');
    alert(b);
    b.parentNode.removeChild(b);

    var body = document.getElementsByTagName("body")[0];


    // creates a <table> element and a <tbody> element
    var tbl     = document.createElement("table");
    tbl.setAttribute('id','tracktable');
    var tblBody = document.createElement("tbody");

    // creating all cells
    for (var j = 0; j < 2; j++) {
        // creates a table row
        var row = document.createElement("tr");

        for (var i = 0; i < 2; i++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            var cellText = document.createTextNode("cell is row "+j+", column "+i);
            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);
    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
}


function shortenmode() 
{

     var b = document.getElementById('tracktable');
b.parentNode.removeChild(b);

    var body1 = document.getElementsByTagName("body")[0];
    // creates a <table> element and a <tbody> element
    var tbl1  = document.createElement("table");
    tbl1.setAttribute('id','shorttable');
    var tblBody1 = document.createElement("tbody");

    // creating all cells
    for (var j = 0; j < 2; j++) {
        // creates a table row
        var row = document.createElement("tr");

        for (var i = 0; i < 2; i++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            var cellText = document.createTextNode("cell is row "+j+", column "+i);
            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody1.appendChild(row);
    }

    // put the <tbody> in the <table>
    tbl1.appendChild(tblBody1);
    // appends <table> into <body>
    body1.appendChild(tbl1);
    // sets the border attribute of tbl to 2;
    tbl1.setAttribute("border", "2");

         //here it will work
    //var b = document.getElementById('shorttable');
    //alert(b);
    //b.parentNode.removeChild(b);

    //myP.removeChild(myTextNode);
}


  </script>
  </head>
  <body >
 <button type="button" name="website" onclick=trackmode() > track</button>
 <button type="button" name="website1" onclick=shortenmode() > short </button>
 </body>
</html>
  • javascript
  • html
  • dom
Share Improve this question edited Jul 29, 2014 at 13:07 BenMorel 36.7k52 gold badges206 silver badges337 bronze badges asked Jun 8, 2011 at 10:02 sagarsagar 1,4356 gold badges21 silver badges39 bronze badges 3
  • Could you show your HTML and explain what is failing to happen? – lonesomeday Commented Jun 8, 2011 at 10:54
  • i am trying to to delete current table and display new one as per the button click. – sagar Commented Jun 8, 2011 at 11:00
  • its working ..as i am displaying same table here thats why i didn't recognise it – sagar Commented Jun 8, 2011 at 11:38
Add a ment  | 

1 Answer 1

Reset to default 7

To remove an element, you need to remove it from its parent, not from the document. So:

b.parentNode.removeChild(b);

本文标签： javascriptcan we remove dom tableStack Overflow

版权声明：本文标题：javascript - can we remove dom table? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745365148a2655477.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。