javascript动态向网页中添加表格实现代码

添加表格是前端开发中常用且必要的操作之一，其中JavaScript作为一门强大的脚本语言，可以方便地动态向网页中添加表格。下面我将为大家讲解如何使用JavaScript实现动态添加表格。

1.创建一个表格容器

首先需要在HTML中创建一个用于存放表格的容器，例如一个<div>标签：

<div id="myTable"></div>

2.使用JavaScript创建表格

使用JavaScript的createElement()方法可以创建一个HTML元素，因此我们使用该方法创建一个table元素，并对其进行配置：

var table = document.createElement('table');    // 创建一个table元素

// 添加表头
var header = table.createTHead();               // 创建一个表头
var row = header.insertRow();                   // 插入一行
var cell1 = row.insertCell(0);                  // 为该行插入一个表头单元格
cell1.innerHTML = "<b>姓名</b>";                // 对该单元格进行设置

// 添加数据行
var tbody = table.createTBody();                // 创建一个tbody对象
for (var i = 0; i < 3; i++) {
    var row = tbody.insertRow();                // 为表格插入一行
    var cell1 = row.insertCell(0);              // 插入第一列单元格并设置数据
    cell1.innerHTML = "学生" + (i + 1);
    var cell2 = row.insertCell(1);              // 插入第二列单元格并设置数据
    cell2.innerHTML = "90";
}

// 将表格添加到容器
document.getElementById('myTable').appendChild(table);

在这段代码中，我们使用document.createElement('table')方法创建了一个table元素，接着使用createTHead()方法为其添加表头，然后使用createTBody()方法创建一个tbody对象并向其中添加数据行。最后，使用appendChild()方法将表格添加到刚才创建的容器中。

3.实现动态添加表格

如果需要实现动态添加表格，我们可以使用一个按钮，当用户点击该按钮的时候，通过JavaScript来动态地将表格添加到页面上。

首先需要在HTML中创建一个按钮：

<button id="addTableBtn">添加表格</button>

然后在JavaScript中，使用addEventListener()方法为该按钮添加一个点击事件，当用户点击该按钮时，通过刚才的代码来动态添加表格：

document.getElementById('addTableBtn').addEventListener('click', function(){
   var table = document.createElement('table');
   // ... 创建表格的代码略
   document.getElementById('myTable').appendChild(table);
});

通过上述代码，当用户点击“添加表格”按钮时，会在容器中动态添加一个新的表格。

示例一：动态添加表格

HTML代码：

<!-- 创建一个按钮 -->
<button id="addTableBtn">添加表格</button>

<!-- 创建一个用于存放表格的容器 -->
<div id="myTable"></div>

JavaScript代码：

// 为按钮添加点击事件
document.getElementById('addTableBtn').addEventListener('click', function(){
   var table = document.createElement('table');
   // 添加表头和数据行的代码略
   document.getElementById('myTable').appendChild(table);
});

该示例中，当用户点击“添加表格”按钮时，会在容器中动态添加一个表格。

示例二：使用JSON动态添加表格

HTML代码：

<!-- 创建一个按钮 -->
<button id="addTableBtn">添加表格</button>

<!-- 创建一个用于存放表格的容器 -->
<div id="myTable"></div>

JavaScript代码：

// 创建一个JSON数据源
var data = [
    {name:'小明',score:98,rank:1},
    {name:'小红',score:90,rank:2},
    {name:'小强',score:88,rank:3},
    {name:'小兵',score:62,rank:4},
    {name:'小菜',score:42,rank:5}
];

// 获取容器对象
var container = document.getElementById('myTable');

// 将数据渲染为表格
function renderTable(data){
    // 创建表格元素
    var table = document.createElement('table');
    table.style.border = '1px solid #000';

    // 添加表头
    var header = table.createTHead();
    var row = header.insertRow();
    for (var key in data[0]){
        var th = document.createElement('th');
        th.innerHTML = key;
        row.appendChild(th);
    }

    // 添加数据行
    var tbody = table.createTBody();
    for(var i=0;i<data.length;i++){
        var row = tbody.insertRow();
        for(var key in data[i]){
            var cell = row.insertCell();
            cell.innerHTML = data[i][key];
            cell.style.border = '1px solid #000';
        }
    }
    // 将表格添加到容器
    container.appendChild(table);
}

// 为按钮添加点击事件
document.getElementById('addTableBtn').addEventListener('click', function(){
    renderTable(data);
});

该示例中，我们使用JSON数据作为数据源，并利用JavaScript的循环语句动态生成表格，最后将之添加到容器中。

以上就是实现“JavaScript动态向网页中添加表格”的完整攻略，希望对您有所帮助。