在js中为table自动添加和删除一行（IE和firefox兼容）

最新推荐文章于 2022-07-01 20:21:36 发布

yinxianluo

最新推荐文章于 2022-07-01 20:21:36 发布

阅读量767

点赞数

分类专栏： JAVA开发文章标签： JS

本文链接：https://blog.csdn.net/yinxianluo/article/details/8759734

版权

JAVA开发专栏收录该内容

83 篇文章 0 订阅

订阅专栏

    <html>
    <head>
        <title>add new row</title>
        <script type="text/javascript">

             function removeFile(id) {
                var tr=id.parentNode.parentNode;
                var tbody=tr.parentNode;
                tbody.removeChild(tr);
             }


             function addFile()
             {
                var newTr = document.getElementById("spectrogramTable").insertRow(-1);
                //added new cell
                var numTd = newTr.insertCell(-1);
                var discriptionTd = newTr.insertCell(-1);
                var userNameTd = newTr.insertCell(-1);
                var downloadTd = newTr.insertCell(-1);
                var removeTd = newTr.insertCell(-1);
                //settilng content
                numTd.innerText = document.getElementById('spectrogramTable').rows.length-1;
                discriptionTd.innerText = "column1";
                userNameTd.innerText = "column2";
                downloadTd.innerText = "column3";
                removeTd.innerHTML = "<a οnclick=\"removeFile(this)\">remove</a>";
             }

        </script>


        </head>
    <body>
       <input type="button" οnclick="addFile()">addNewRow</input>
       <table style="border-collapse: collapse; border:1px solid #527E92;" id="spectrogramTable">
            <tr>
                <th>column0</th>
                <th>column2</th>
                <th>column3</th>
                <th>column4</th>
                <th>column5</th>
            </tr>

        </table>
    </body>
    </html>