js动态创建表格

PROMULGATOR

Kreme .

湖北省襄阳市

← 原生JS左右切换效果

→ 纯CSS鼠标悬停动画 (原创)

相关代码

js动态创建表格

简易表格自动创建

表格动态加载

动态添加表格及获取表格中数据

js动态生成表格

动态添加表格内容

table表格动态添加删除行

Html

Css

Js


    
        用户信息采集
    
    请输入姓名:  

 请输入邮箱:  

 请输入手机:  

 请输入地址:

body {
	margin:0;
	padding:0;
}
#box table {
	margin:20px auto;
	border-collapse:collapse;
	text-align:center;
}
#user {
	width:600px;
	margin:0 auto;
}

var headDatas = ['姓名', '邮箱', '手机', '地址'];
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var table = document.createElement('table');
box.appendChild(table);
table.border = '1px';
table.width = '600px';
var thead = document.createElement('thead');
table.appendChild(thead);
var tr = document.createElement('tr');
thead.appendChild(tr);
tr.style.height = '40px';
tr.style.backgroundColor = 'skyblue';
for (var i = 0; i < headDatas.length; i++) {
    var data = headDatas[i];
    var th = document.createElement('th');
    tr.appendChild(th);
    th.innerText = data;
}
var tbody = document.createElement('tbody');
table.appendChild(tbody);
var user = document.getElementById('user');
var inputs = user.getElementsByTagName('input');
var count = 0;
var bg;
btn.onclick = function() {
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if (input.value === '') {
            alert('请将数据填入完全');
            return false;
        }
    }
    var tr = document.createElement('tr');
    tbody.appendChild(tr);
    tr.style.height = '30px';
    if (count % 2 === 0) {
        tr.style.backgroundColor = 'skyblue';
    } else {
        tr.style.backgroundColor = 'pink';
    }
    count++;
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if (input.type === 'text') {
            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerText = input.value;
        }
    }
}
var btn2 = document.getElementById('btn2');
btn2.onclick = function() {
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if (input.type === 'text') {
            input.value = '';
        }
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js动态创建表格



代码描述：当用户输入信息点击提交后会自动将用户信息记录到表格中

动态创建的表格中,可以显示隔行变色

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js动态创建表格-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号