js动态添加删除列 - 调试易

js动态添加删除列

js动态添加删除列

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<script>
                var name;
                var currentList;
                function addList()
                {
                        name=document.getElementById("desc").value;
                        if(name=="")
                        {
                                window.alert("请填写一个描述信息");
                                return;
                        }

                        currentList=document.getElementById("sortList");
                        //window.alert(currentList.value);
                        var row,cell,txtnode;
                        row=document.createElement("<tr>");
                        row.setAttribute("id",name);
                        cell=document.createElement("<td>");
                        txtnode=document.createTextNode(name);                        cell.appendChild(txtnode);
                        row.appendChild(cell);                        var button=document.createElement("<input>");
                        button.setAttribute("type","button");
                        button.setAttribute("onclick","deleteButton()");
                        button.setAttribute("value","删除");
                        cell=document.createElement("<td>");

                        cell.appendChild(button);
                        row.appendChild(cell);
                        currentList.appendChild(row);
                }                function deleteButton()
                {
                        var row=document.getElementById(name);
                        //window.alert(row);
                        currentList.removeChild(row);

                }
        </script>
</head><body>
        <form action="" method="POST" name="myform">
                <table border="1" align="center" bgcolor="#8797AF" width="400">
                        <caption><font color="red">动态添加和删除列</font></caption>
                        <tr>
                                <td>添加列</td>
                                <td><input type="text" name="desc" size="20" maxsize="20" id="desc"></td>
                                <td><input type="button" value="确认" ></td>
                        </tr>
                        <tr>
                                <table border="1" align="center" bgcolor="#AD6875" width="400">
                                        <tr>
                                                <td>描述</td>
                                                <td>操作</td>
                                        </tr>
                                        <tbody id="sortList"></tbody>
                                </table>
                        </tr>
                </table>
        </form>
</body></html>点击删除的时候没的反应,浏览器也不报错,请教各位，该如何解决，不胜感激!!以上是错误代码,下面是正确的:
<html>
<head>
        <title>动态添加和删除列</title>
        <script>
                var name;
                var currentList;
                function addList()
                {
                        name=document.getElementById("desc").value;
                        if(name=="")
                        {
                                window.alert("请填写一个描述信息");
                                return;
                        }

                        currentList=document.getElementById("sortList");
                        //window.alert(currentList.value);
                        var row,cell,txtnode;
                        row=document.createElement("<tr>");
                        row.setAttribute("id",name);
                        cell=document.createElement("<td>");
                        txtnode=document.createTextNode(name);
                        cell.appendChild(txtnode);
                        row.appendChild(cell);
                        var button=document.createElement("<input>");
                        button.setAttribute("type","button");
                        button.onclick=function (){deleteButton(name);};
                        button.setAttribute("value","删除");
                        cell=document.createElement("<td>");

                        cell.appendChild(button);
                        row.appendChild(cell);
                        currentList.appendChild(row);
                }
                function deleteButton(name)
                {
                        var row=document.getElementById(name);
                        //window.alert(row);
                        var currentList=document.getElementById("sortList");
      currentList.removeChild(row);

                }
        </script>
</head>
<body>
        <form action="" method="POST" name="myform">
                <table border="1" align="center" bgcolor="#8797AF" width="400">
                        <caption><font color="red">动态添加和删除列</font></caption>
                        <tr>
                                <td>添加列</td>
                                <td><input type="text" name="desc" size="20" maxsize="20" id="desc"></td>
                                <td><input type="button" value="确认" ></td>
                        </tr>
                        <tr>
                                <table border="1" align="center" bgcolor="#AD6875" width="400">
                                        <tr>
                                                <td>描述</td>
                                                <td>操作</td>
                                        </tr>
                                        <tbody id="sortList"></tbody>
                                </table>
                        </tr>
                </table>
        </form>
</body>
</html>
----google
你试试这个方法
这么麻烦干什么,用jqeruy,用最少的代码干更多的事
$("tr").append(td);
楼上兄弟说的不错，Jquery有现成代码
有两种方案可以解决:
1.DOM 对象操作,得到指定的单元格,调用对的删除子元素方法,如:obj.remove(cell);
2,第二中,可以采用隐藏该表的对应列,即设置 WIDTH = 0,从上到下,根据行数;需要注意的是,如果直接动态删除摸列,页面会出现错位效果!
没时间重新写，参照一下这个删除行的脚本函数,自己改造下吧!
//表格删除行操作
var tr_selected;
var tab_rows;
function delRow(tabId){
var tab = document.getElementById("mytab");
if(tab || "TABLE"==tab.tagName){
tab_rows = tab.rows.length;
var tbody = tab.childNodes.item(0); if(tr_selected){
if(tab_rows>2){
tr_selected.removeNode(tr_selected);
tr_selected = null;
}else{
alert("clear text");
}

}else{
alert("no row is selectd!");
}
}else{
alert("["+tabId+"] is not table object");
}

}
再看看这个能不能找到得到列表的方法吧!
//根据当前行清空文本中的数据
function clearTdText(tr){
if(tr || "TR"==tr.tagName){
var length = tr.cells.length;
//alert(length);
for(var i=0;i<length;i++){
var td = tr.childNodes.item(i);
var cols = td.childNodes.length;
for(var k=0;k<cols;k++){
var el = td.childNodes.item(k);
var name = el.tagName;
//alert(name);
if("INPUT"==name){
el.value = "";
}else{
var el1 = el.childNodes.item(0);
if(el1 && el1.tagName=="INPUT"){
el1.value = "";
}
}
}
}
}
}