使用Javascript制作动态表格

最新推荐文章于 2023-10-18 22:36:50 发布

ycwu3

最新推荐文章于 2023-10-18 22:36:50 发布

阅读量292

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/ycwu3/article/details/83975775

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript 动态表格的实现，效果：当点击最后一行时，动态生成新的一行。实现了文本框、单选框、下拉框的动态生成。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ActiveTable 动态表格</title>
</head>
<h2>员工信息统计表</h2>
<body>
 <table id="activetable" border="1" >
 <tr><th>工  号</th><th>姓   名</th><th>性  别</th><th>职    务</th></tr>
 <tr>
  <td><input type="text" name="number" size="8" οnclick="addRow();"></td>
  <td><input type="text" name="realname" size="18"></td>
  <td><input type="radio" name="sex" value="男" checked="checked" size="6"><label>男</label>
   <input type="radio" name="sex" value="女" size="6"><label>女</label>
  </td>
  <td>
   <select name="duty" style="width: 100px;">
    <option value="manager">经理</option>
    <option value="assistantmanager">副经理</option>
    <option value="employee">员工</option>
   </select>
  </td>
  </tr>
 
 </table>
</body>

<script type="text/javascript">

 function addRow(){
   var activetable = document.getElementById("activetable");   //找到表格
   var tr = document.createElement("tr");       //创建一行
   
   var td1 = document.createElement("td");       //创建第一个td，工号
   var numberField=document.createElement("input");
   numberField.setAttribute("type", "text");
   numberField.setAttribute("name", "number");
   numberField.setAttribute("size","8");        //宽度为8个字符
   numberField.setAttribute("onclick","addRow()");      //为其添加onclick事件
   td1.appendChild(numberField);          //将input放入td1
   tr.appendChild(td1);            //将td1放入tr

   var td2 = document.createElement("td");       //创建第二个td,姓名
   var realnameField=document.createElement("input");
   realnameField.setAttribute("type", "text");
   realnameField.setAttribute("name", "number");
   realnameField.setAttribute("size", "18");
   td2.appendChild(realnameField);
   tr.appendChild(td2);

   var td3 = document.createElement("td");       //创建第三个td,性别
   var maleField = document.createElement("input");    
   maleField.setAttribute("type","radio");       //创建radio,"男"
   maleField.setAttribute("checked","checked");
   var textMale = document.createTextNode("男");     //创建文本节点,"男"

   var femaleField = document.createElement("input");
   femaleField.setAttribute("type","radio");      //创建radio,"女"
   var textFemale = document.createTextNode(" 女 ");                //创建文本节点，"女"
 
   
   td3.appendChild(maleField);
   td3.appendChild(textMale);

   td3.appendChild(femaleField);
   td3.appendChild(textFemale);
   tr.appendChild(td3);
   

   var td4 = document.createElement("td");         //创建第四个td,职务
   var dutyField= document.createElement("select");    //创建下拉框
   dutyField.setAttribute("name","duty");
   dutyField.setAttribute("style","width:100px");     //设置下拉框宽度为100px
   dutyField.appendChild( createOption("经理 "));
   dutyField.appendChild( createOption("副经理 "));
   dutyField.appendChild( createOption("员工  "));
   td4.appendChild(dutyField);
   tr.appendChild(td4);

   
   var tbody=activetable.children[0];
   tbody.appendChild(tr);

   var trArray=tbody.children;
   var lastTR=trArray[trArray.length-2];       //取得倒数第2个tr
   var lastInput=lastTR.children[0].children[0];     //第1个格子中的输入框
   lastInput.removeAttribute("onclick");       //去掉倒数第二行第一格的onclick事件
  
  }
 function createOption(text){           //由文本生成文本节点，用于创建select的option 
  var option=document.createElement("option");
  option.setAttribute("value",text);
  option.appendChild(document.createTextNode(text));
  return option;
 }

 </script>
</html>

效果图：

ycwu3

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Javascript制作动态表格

JavaScript 动态表格的实现，效果：当点击最后一行时，动态生成新的一行。实现了文本框、单选框、下拉框的动态生成。代码如下：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&l...
复制链接

扫一扫