html5在线表格生成器,js简单实现自动生成表格功能示例

本文实例讲述了js简单实现自动生成表格功能。分享给大家供大家参考，具体如下：

JS实现自动生成表格

由于自己的算法8太行，所以只能尽量用简单点的方法实现效果

下面直接上代码

姓名年龄身高

.del{

cursor: pointer;

color: blue;

}

var tableInfo = [

{ 姓名: '张三', 年龄: 20, 身高: 160 },

{ 姓名: '李四', 年龄: 18, 身高: 158 },

{ 姓名: '王二麻子', 年龄: 19, 身高: 180 },

{ 姓名: '孙悟空', 年龄: 100, 身高: 150 },

{ 姓名: '猪八戒', 年龄: 100, 身高: 155 },

{ 姓名: '龟龟', 年龄: 200, 身高: 0.5 }

]

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

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

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

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

var del = document.createElement('span');

//td赋值为对应的表格信息

tdName.innerHTML = tableInfo[i].姓名;

tdAge.innerHTML = tableInfo[i].年龄;

tdTall.innerHTML = tableInfo[i].身高;

//设置删除按钮

del.innerHTML = '删除';

del.className = 'del';

//调用创建函数

createAll(tdName, tdAge, tdTall);

}

//创建tr>td 和删除按钮

function createAll(tdName, tdAge, tdTall) {

table.appendChild(tr);

tr.appendChild(tdName);

tr.appendChild(tdAge);

tr.appendChild(tdTall);

tr.appendChild(del);

}

//设置删除按钮的点击事件

var btnDel = document.getElementsByClassName('del');

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

btnDel[i].onclick = function () {

//找到删除键的父节点(tr)并移除

this.parentNode.remove();

}

}

代码效果：

如果有什么地方做的不够完善，请多多指教

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。