实现的功能有Table表格添加,删除。输入,删除的全选,单行删除。

HTML代码部分

<body>
<form>
<table border="1" align="center" width="300px" height="200">
<tr>
<td><center><strong>编号</strong></center></td>
<td><input type="text" id="id"></td>
</tr>
<tr>
<td><center><strong>姓名</strong></center></td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td><center><strong>密码</strong></center></td>
<td><input type="text" id="pass"></td>
</tr>
<tr>
<td><center><strong>邮箱</strong></center></td>
<td><input type="text" id="address"></td>
</tr>
<tr>
<td colspan="2">
<center>
<input type="reset" value="重置">
<input type="button" value="添加" onClick="add()">
</center>
</td>
</tr>
</table>
</form>
<hr>
<table border="1" width="400" align="center">
<thead>
<tr>
<td>
<center>
<input type="checkbox" name="all" onClick="checkall()">
<input type="button" onClick="del()" value="删除">
</center>
</td>
<td><center><strong>编号</strong></center></td>
<td><center><strong>姓名</strong></center></td>
<td><center><strong>密码</strong></center></td>
<td><center><strong>邮箱</strong></center></td>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
</body>

JavaScript部分

    <script type="text/javascript">
function add(){
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
var address = document.getElementById("address").value; var tr = document.createElement("tr");
tr.setAttribute("align","center");
var td0 = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","checkbox");
input.setAttribute("name","item");
input.setAttribute("onClick","selectItem()");
td0.appendChild(input);
var td1 = document.createElement("td");
td1.innerHTML=id;
var td2 = document.createElement("td");
td2.innerHTML=name;
var td3 = document.createElement("td");
td3.innerHTML=pass;
var td4 = document.createElement("td");
td4.innerHTML=address; tr.appendChild(td0);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4); var tbody = document.getElementById("list");
tbody.appendChild(tr);
}
function checkall(){
var inputall = document.getElementsByName("all")[0];
var inputarr = document.getElementsByName("item");
for(var i = 0;i<inputarr.length;i++){
inputarr[i].checked = inputall.checked;
}
}
function selectItem(){
var inputall = document.getElementsByName("all")[0];
var inputarr = document.getElementsByName("item");
var sum = 0;
for(var i = 0;i<inputarr.length;i++){
if(inputarr[i].checked){
sum += 1;
}
}
if(inputarr.length==sum){
inputall.checked = true;
}else{
inputall.checked = false;
}
}
function del(){
var inputarr = document.getElementsByName("item");
var tbody = document.getElementById("list");
for(var i=inputarr.length-1;i>=0;i--){
if(inputarr[i].checked){
tbody.removeChild(inputarr[i].parentNode.parentNode);
}
}
}
</script>

用JavaScript写的动态表格的更多相关文章

  1. JavaScript操作DOM(动态表格处理)

    <html> <title>动态处理表格数据</title> <head> <script type="text/javascript& ...

  2. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  3. JavaScript 创建动态表格

    JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...

  4. JavaScript实现动态表格

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  5. jQuery动态表格插件 AppendGrid

    AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...

  6. 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

    × 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...

  7. 5.11-5.15javascript制作动态表格

    制作动态表格的主要是运用js中表格类的insertRow.insertCell简易添加行和列的代码,不过要注意每行添加的表格是有位置行编号的,每行的编号为rows.length-1,增加的表格内的标签 ...

  8. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  9. jQuery的下面是动态表格动态表单中的HTML代码

    动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...

随机推荐

  1. C++ 的虚析构函数

    当一个基类的指针指向一个派生类的对象,并用该基类的指针去删除或者析构派生类对象时,如果基类的析构函数不是声明为虚函数,那么在析构时基类的析构函数将会被直接调用,派生类的析构函数应为没被调用而导致内存泄 ...

  2. 堆和索引堆的实现(python)

    ''' 索引堆 ''' ''' 实现使用2个辅助数组来做.有点像dat.用哈希表来做修改不行,只是能找到这个索引,而需要change操作 还是需要自己手动写.所以只能用双数组实现. #引入索引堆的核心 ...

  3. Asterisk的type类型和身份认证

    Asterisk的type类型和身份认证 转载:http://zeevli.blog.163.com/blog/static/119591610201111745012380/ 在Asterisk中对 ...

  4. Ajax在jQuery中的应用 (4)向jsp提交表单数据

    ajax技术带给我们的是良好的用户体验,同时,使用jquery可以简化开发,提高工作效率. 下面就介绍一下大致的开发步骤. 工具/原料 本文中使用的是 jquery-1.3.2.min.js 方法/步 ...

  5. JNI,RegisterNative参数解析

    Register native method - 数据类型和method descriptor 使用JNI时,为了使得虚拟机可以找到在C/C++ code中定义的native方法,有两种机制可以用,一 ...

  6. hadoop web管理界面不能打开问题

    centos 7 安装好hadoop的,hadoop和yarn都正常启动,但是yarn的web界面(8088),hdfs的web界面(50070)都不能打开,防火墙是处于关闭状态. 修改默认启动级别, ...

  7. CProgressCtrl进度条控件实现进度滚动效果

    关于CProgressCtrl 控件的基本操作网上有很多资料,可我想实现进度条中进度滚动效果,即很多时候程序出现的等待或启动画面,如下图: 实现这个效果的函数为SetMarquee(_In_ BOOL ...

  8. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  9. textInput事件

    DOM3级事件引入了 textInput 这个代替keypress的textInput的行为稍有不同 区别 只要可以获得焦点的元素都有keypress事件,但是textInput事件只有文本编辑区域才 ...

  10. PHP continue break 区别 用法

    <?php //continue 跳过当前循环,进行下一个 //break 终止当前循环 $db=new PDO("mysql:host=localhost;dbname=root&q ...