用js创建表格

第一个实验


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <script type="text/javascript">
        function createTable(){
            var table = document.createElement("table");
            table.border = "1";
            table.width = "100%";

            //table API
            //创建一行
            //var tr = table.insertRow(table.rows.length);
            //创建单元格
            //var td = tr.insertCell(tr.cells.length);
            var tr,td;
            for(var i=0;i<6;i++){
                //循环插入元素
                tr = table.insertRow(table.rows.length);
                if(i%2 === 0){
                    tr.style.backgroundColor = "red";
                }else{
                    tr.style.backgroundColor = "green";
                }
                for(var j=0;j<5;j++){
                    td = tr.insertCell(tr.cells.length);
                    td.innerHTML = "第"+i+"行,第"+j+"列";
                    td.align = "center";

                }
            }

            //td.innerHTML = "测试";

            document.querySelector("#tb").appendChild(table);
        }
    script>
head>
<body>
<input type="button" onclick="createTable()" value="createTable">
<hr>
<div id="tb">div>
body>
html>

第二个分析

function createTable(empTable,jsonOut){


for(var i=0;i//当多个数据进来,for循环遍历所有的数据

var jsonObj=jsonOut[i];
//挑出其中一组数据
var trRow=empTable.insertRow(empTable.rows.length);
//给表格新增一行

var td1=trRow.insertCell(0);
//新增行的第一列

var checkBox="";

var deptCode="+jsonObj.deptCode+"\"  />";

//实例多选框以及隐藏的部门编号

td1.align="center";
td1.setAttribute("width",50);
td1.setAttribute("height",30);
td1.setAttribute("rowspan",1);
td1.setAttribute("colspan",1);
//设置第一列的属性
td1.innerHTML=checkBox;
//将多选框和隐藏的部门编号放进第一列
td1.innerHTML+=deptCode;

第三个分享

var consumable_name = $("#consumable_name").val();
    $.ajax({
        type: 'POST',
        url: "/consumable/manager/stockPage",
        data: {
            consumable_name: consumable_name,
            p: p
        },
        dataType: "json",
        success: function (data) {
            if (data["result"] == "success") {
                var value = "";
                if (data["append"] == null) {
                    layer.msg('暂无数据');
                    return;
                }
                var append = eval(data["append"]["results"]);
                for (var i = 0; i < append.length; i++) {
                    value += '\
                    append[i]["stock_id"]  +'" id="tr_' + append[i]["stock_id"] + '">\
                        append[i]["stock_id"]+'">\
                        append[i]["stock_id"]+'" value="'+append[i]["consumable_id"]+'">append[i]["stock_id"]+'" value="'+append[i]["consumable_name"]+'">' + $.alle_null2Str(append[i]["consumable_name"]) + '\
                         append[i]["stock_id"]+'" value="'+append[i]["pack"]+'">' + append[i]["pack"] + '\
                           append[i]["stock_id"]+'" value="'+append[i]["amount"]+'">' + append[i]["amount"] + append[i]["consumable_unit"]+'\
                            append[i]["stock_id"]+'" value="'+append[i]["consumable_unit"]+'">append[i]["stock_id"]+'" value="'+append[i]["space_name"]+'">append[i]["stock_id"]+'" value="'+append[i]["space_id"]+'"> ' + append[i]["space_name"] + '\
                        \
                    \
                    ';
                }
                $("#data_tbody").html(value);

你可能感兴趣的:(用js创建表格)