JS 创建动态表格练习
创建动态表格
1.1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TABLE01</title>
<script type="text/javascript">
function add() {
var t = document.getElementById("tab");
var r = t.insertRow();
var c1 = r.insertCell();
var c2 = r.insertCell();
var c3 = r.insertCell();
c1.innerHTML ="<input type='text'>";
c2.innerHTML ="<input type='text'>";
c3.innerHTML = "<button onclick='del(this)' > - </button>";
}
function del(obj){
var d = obj.parentNode.parentNode;
d.parentNode.removeChild(d);
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="2" id="tab">
<tr>
<td width="150px" height="20px"> 编号 </td>
<td width="150px" height="20px"> 内容 </td>
<td width="38px" height="20px"> 删除 </td>
</tr>
</table>
<button onclick="add()" > + </button>
</body>
</html>
1.2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS创建动态表格</title>
<script type="text/javascript">
function delrow(obj){
var tr = obj.parentNode.parentNode;
var table = document.getElementById("mytable");
table.deleteRow(tr.rowIndex);
} var count=2;
function addrow(){
var table = document.getElementById("mytable");
var tr = table.insertRow(); //插入一个新的 行
var td1 = tr.insertCell(); //插入一个新的 列
var td2 = tr.insertCell();
var td3 = tr.insertCell();
td1.innerHTML=count+"<input type='text'></input>";
td2.innerHTML="<input type='text'></input>";
td3.innerHTML="<input type ='button' value=' - ' onclick='delrow(this)'></input>";
count++;
}
</script>
</head>
<body>
<table id = "mytable" border="1">
<tr>
<td>1<input type="text"></input></td>
<td><input type="text"></input></td>
<td><input type ="button" value=" - " onclick="delrow(this)"></input></td>
</tr>
</table>
<input type ="button" value=" + " onclick="addrow()"></input>
</body>
</html>
创建动态表格,添加内容
2.1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TABLE02</title>
<script type="text/javascript">
function add(){
var name=document.getElementById("name").value;
var txt =document.getElementById("txt").value;
var t = document.getElementById("tab");
var r = t.insertRow();
var c1 = r.insertCell();
c1.innerHTML=name;
var c2 = r.insertCell();
c2.innerHTML=txt;
}
</script>
</head>
<body>
<div align="center">
<form action="#" method="post" >
姓名: <input type="text" id="name">
内容: <input type="text" id="txt" />
<input type="button" value="添加" align="center" onclick="add()"/>
<input type="reset" value="重置">
</form>
<br/>
<table id="tab" border="1" align="center" width="500PX">
</table>
</div>
</body>
</html>
2.2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 创建动态表格传值</title>
<script type="text/javascript">
function addrow(){
var name = document.getElementById("name").value;
var num = document.getElementById("num").value;
var table=document.getElementById("mytable");
var tbody=document.createElement("tbody");
var tr=document.createElement("tr");
var td_name=document.createElement("td");
var td_num=document.createElement("td");
td_name.appendChild(document.createTextNode(name))
td_num.appendChild(document.createTextNode(num))
tr.appendChild(td_name);
tr.appendChild(td_num);
tbody.appendChild(tr);
table.appendChild(tbody);
}
</script>
</head>
<body>
姓名<input type="text" id="name">
编号<input type="text" id="num"><br/>
<input type="button" value="增加" onclick="addrow()">
<table id="mytable" border="1" >
<tr>
<td>姓名</td>
<td>编号</td>
</tr>
</table>
</body>
</html>
JS 创建动态表格练习的更多相关文章
- js创建table表格
//js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...
- 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI
原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...
- JavaScript 创建动态表格
JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- js的动态表格的增删改查思路
1. 首先我们要知道,动态添加,肯定不是 在页面上写死得,而是通过js调用循环放入到页面上的,我们在写动态表格的时候不要先着急写,我们第一步要做的就是构思,要把自己的逻辑先弄清楚,不然的话,前面是好写 ...
- JS做动态表格
在后台将数据发送过来后,你需要将这些数据做成表格,实现一般表格管理功能 例如这种数据格式, 首先要创建table 在table中添加thead 在thead中添加tr 循环数组,且创建开头的inpu ...
- js的动态表格的增删改查完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js创建表格
js创建一个表格,其中的表头已经有了,要从json中读取的数据一行一行地创建表格 function create_table(data){ tableNode = document.getElemen ...
- Java利用poi生成word(包含插入图片,动态表格,行合并)
转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...
随机推荐
- 初探LINUX之--基础知识篇
一 Linux哲学思想 1 一切都是一个文件(包含硬件) 2 小型,单一用途的程序 3 链接程序,共同完成复杂的任务 4 避免令人困惑的用户界面 5 配置数据存储在文本中 二 Linux重要概念 Sh ...
- C++对象构造时,构造函数运行时并不知道VT的存在
class A {public: A() { init(); } virtual void init() { printf("A::init\n"); }}; class B : ...
- 银联银行卡查询服务-dubbo实现
最近看到银联开放了一个银行卡查询的服务,具体内容见官网https://open.unionpay.com/tjweb/api/detail?apiSvcId=51 尝尝鲜 在文档下载目录下,下载upa ...
- Archlinux笔记本安装手记
最近看着Linux Mint里一揽子乱七八糟的应用和散布各处的配置文件愈发烦躁,便想体验下大名鼎鼎的Arch,网上的帖子们把Arch Linux的安装难度描述的非常可怕,但实际上跟着Wiki一步一步来 ...
- Taro -- 获取用户手机号
1. 安装 Taro 脚手架工具 安装 Taro 开发工具 @tarojs/cli 使用 npm 或者 yarn 全局安装 $ npm install -g @tarojs/cli $ yarn gl ...
- SQL 1 数据库 表的操作
数据库:是按照数据结构来组织.存储和管理数据的建立在计算机存储设备上的仓库.一句话就是存储数据的仓库 数据库的分类:网络数据库.层级数据库.关系结构数据库. 倘若按照数据库的存储介质来分:关系型数据库 ...
- thread.join() 阻塞原理分析
参考: https://blog.csdn.net/u010983881/article/details/80257703
- NIO拷贝
- Java中的栈和队列
栈: public class Stack<E> extends Vector<E> { // 使用数组实现栈 // 构造一个空栈 public Stack() { } // ...
- Chronograf启动(Influxdb的管理平台)
1.创建一个bat文件,文件内容如下 @echo off:: 开启chronograf服务,服务监听端口9084echo 开启chronograf服务chronograf.exe /port 9084 ...