用js创建表格

最新推荐文章于 2024-05-11 14:22:31 发布

我是漂亮的女程序员

最新推荐文章于 2024-05-11 14:22:31 发布

阅读量1.2w

点赞数 4

本文链接：https://blog.csdn.net/a520songhai/article/details/80828183

版权

第一个实验

<!DOCTYPE html>
<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<jsonOut.length;i++){
//当多个数据进来，for循环遍历所有的数据

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

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

var checkBox="<input type=\"checkbox\" name=\"checkboxName\"  />";

var deptCode="<input type=\"hidden\" name=\"hiddenDeptCode\" value=\""+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 += '\
                    <tr class="tr_'+append[i]["stock_id"]  +'" id="tr_' + append[i]["stock_id"] + '">\
                        <td><input type="checkbox" name="checkbox" onclick="checkClick(this)" value="'+append[i]["stock_id"]+'"></td>\
                        <td><input type="hidden" id="consumable_id_'+append[i]["stock_id"]+'" value="'+append[i]["consumable_id"]+'"><input type="hidden" id="consumable_name_'+append[i]["stock_id"]+'" value="'+append[i]["consumable_name"]+'">' + $.alle_null2Str(append[i]["consumable_name"]) + '</td>\
                         <td><input type="hidden" id="pack_'+append[i]["stock_id"]+'" value="'+append[i]["pack"]+'">' + append[i]["pack"] + '</td>\
                           <td><input type="hidden" id="amount_'+append[i]["stock_id"]+'" value="'+append[i]["amount"]+'">' + append[i]["amount"] + append[i]["consumable_unit"]+'</td>\
                            <td><input type="hidden" id="consumable_unit_'+append[i]["stock_id"]+'" value="'+append[i]["consumable_unit"]+'"><input type="hidden" id="space_name_'+append[i]["stock_id"]+'" value="'+append[i]["space_name"]+'"><input type="hidden" id="space_id_'+append[i]["stock_id"]+'" value="'+append[i]["space_id"]+'"> ' + append[i]["space_name"] + '</td>\
                        </tr>\
                    \
                    ';
                }
                $("#data_tbody").html(value);

我是漂亮的女程序员

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
用js创建表格

第一个实验&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript"&gt
复制链接

扫一扫