html js 动态表格数据类型,动态生成表格.html

Document

table,

th,

tr,

td {

border: 1px solid #ccc;

}

td,

th {

width: 150px;

padding: 5px;

}

.red {

background-color: red;

}

.pink {

background-color: pink;

}

请输入姓名：

请输入邮箱：

请输入手机：

请输入地址：

姓名邮箱手机地址

var inpts = document.querySelectorAll('label input');

function $(el) {

return document.querySelector(el)

}

//获取元素

var tb = $('.tb');

var btn = $('#btn');

//点击事件

btn.onclick = function () {

for (var i = 0; i < inpts.length; i++) {

if (inpts[i].value == "") {

alert('请输入完整数据');

return;

}

}

var trs = document.querySelectorAll('tr');

var tr = document.createElement('tr');

if (trs.length % 2 == 0) {

tr.className = 'red';

} else {

tr.className = 'pink';

}

tb.appendChild(tr);//创建tr元素并添加tbody里。

for (var j = 0; j < inpts.length; j++) {

var td = document.createElement('td');

td.innerText = inpts[j].value;

tr.appendChild(td);//创建td并遍历进去

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史