动态表格

来源：互联网发布：洛杉矶outlets 知乎编辑：程序博客网时间：2024/04/27 12:10

除了使用innerHTML属性方便的控制信息在对应位置动态显示外，为了更加灵活地控制Web页面的动态效果，往往需要借助DOM提供的方法和属性对HTML文档进行操作，下面给出一个笔者刚刚做的一个动态添加的效果，当用户单击确认添加按钮时，在下方的表格里马上出现新增的信息，单击删除按钮时，马上删对应的信息，

对应的源码如下：

<head>

</head>

// 增加成员函数

function addSort() {

var name = document.getElementById("name").value;

if(name == "" ) {

return;

}

var row = document.createElement("tr");

row.setAttribute("id", name);

var cell = document.createElement("td");

cell.appendChild(document.createTextNode(name));

row.appendChild(cell);

var deleteButton = document.createElement("input");

deleteButton.setAttribute("type", "button");

deleteButton.setAttribute("value", "删除");

deleteButton.onclick = function () { deleteSort(name); };

cell = document.createElement("td");

cell.appendChild(deleteButton);

row.appendChild(cell);

document.getElementById("sortList").appendChild(row);

//清空输入框

document.getElementById("name").value = "";

}

// 删除成员函数

function deleteSort(id) {

if (id!=null){

var rowToDelete = document.getElementById(id);

var sortList = document.getElementById("sortList");

sortList.removeChild(rowToDelete);

}

</script>

<tr>

</td>

</tr>

<tr>

<b>成员信息管理</b>

</td>

</tr>

<tr>

增加新成员:

</td>

</td>

</td>

</tr>

<tr>

成员信息管理:

</td>

</tr>

<tr>

成员名称:

</td>

操作

</td>

</tr>

</table>

效果图如下：

原文出处：www.easyjf.com