【原】JS 动态修改表格

发表于 2010 年 10 月 31 日由 pswzyu

注意，在javascript中使用document.getElementById()时， ID要已经出现，即，对getElementById的调用要在一个ID的后边。

HTML——–test.html

<html>
<head>
                       <script src="test.js" language="javascript" type="text/javascript"></script>
</head>
<body>
              <table id="table1" border="1">
                        <tr><td>姓名</td><td>性别</td></tr>
 
              </table>
              <p></p>
              <label for="input_name">请输入姓名:</label><input id="input_name" type="text">
              <label for="input_sex">请输入性别:</label><input id="input_sex" type="text">
 
              <p></p>
              <input type="button" onclick="addacell()" value="添加一个单元格"></input>
              <input type="button" onclick="delacell()" value="删除一个单元格"></input>
 
</body>
</html>
 
JAVASCRIPT---------test.js
 
function $(nodeId)
{
               return document.getElementById(nodeId);
}
function addacell()
{
                var user_name = $("input_name").value;
                var user_sex = $("input_sex").value;
                if (user_name == "")
                {
                             window.alert("请输入姓名!");
                             return;
                }
                if (user_sex == "")
                {
                               window.alert("请输入性别!");
                               return;
                }
                var tab = $("table1"); 
                var newTr = tab.insertRow();//创建一行 
                var newTd1 = newTr.insertCell();//创建一个单元格 
                var newTd2 = newTr.insertCell();//创建一个单元格 
                newTd1.innerHTML = user_name;
                newTd2.innerHTML = user_sex;
                $("input_name").value = "";
                $("input_sex").value = "";
}
function delacell()
{
                 var tab = $("table1");
                 if (tab.rows.length - 1 >= 1)
                 {
                              tab.deleteRow(tab.rows.length - 1);
                 }else
                 {
                               window.alert("表格中已没有元素!");
                               return;
                  }
}

此条目发表在 HTML/Javascript/CSS 分类目录。将固定链接加入收藏夹。

发表评论取消回复