table合并单元格demo

图例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table tr td{
            border: 1px solid #dddddd;
        }
    </style>
</head>
<body>
<table id="demoTable">
    <tr>
        <td>一班</td>
        <td>大蜘蛛</td>
        <td>男</td>
        <td>北京</td>
        <td>雨纷纷</td>
        <td>已毕业</td>
    </tr>
    <tr>
      <td rowspan="4">二班</td>
      <td>小兔子</td>
      <td>男</td>
      <td>武汉</td>
      <td>雨纷纷</td>
      <td>已毕业</td>
    </tr>
    <tr>
      <td>小乌龟</td>
      <td>男</td>
      <td>广州</td>
      <td>雨纷纷</td>
      <td>已毕业</td>
    </tr>
    <tr>
        <td>小乌龟</td>
        <td>男</td>
        <td>广州</td>
        <td>雨纷纷</td>
        <td>已毕业</td>
    </tr>
    <tr>
        <td>小乌龟</td>
        <td>男</td>
        <td>广州</td>
        <td>雨纷纷</td>
        <td>已毕业</td>
    </tr>
</table>
<script>
    var dataArray = [{
            "order_id": "511511",
            "order_sn": "2018011990875301010",
            "add_time": "2018-01-19 17:32:25",
            "order_status": "确认",
            "distributor_id": "1",
            "username": "18620381207",
            "mobile": "18620381207",
            "order_amount": "115.00",
            "commission": "0.00",
            "reward_commission": "0.00",
            "commission_status": "待支付",
            "settle_plan_time": "",
            "id_name_price": [{
                "product_id": "178",
                "product_name": "小玩具",
                "price": "100.00",
                "ticket_id": "177"
            }]
        }, {
            "order_id": "511510",
            "order_sn": "2018011949312201010",
            "add_time": "2018-01-19 17:31:37",
            "order_status": "确认",
            "distributor_id": "1",
            "username": "18620381207",
            "mobile": "18620381207",
            "order_amount": "115.00",
            "commission": "0.00",
            "reward_commission": "0.00",
            "commission_status": "待支付",
            "settle_plan_time": "",
            "id_name_price": [{
                "product_id": "178",
                "product_name": "小玩具",
                "price": "100.00",
                "ticket_id": "177"
            }]
        }, {
            "order_id": "511486",
            "order_sn": "2018011879006101010",
            "add_time": "2018-01-18 10:42:13",
            "order_status": "确认",
            "distributor_id": "3",
            "username": "okMFZv5IINtspLoF7t3rElfewWSY",
            "mobile": "13510475319",
            "order_amount": "0.00",
            "commission": "0.00",
            "reward_commission": "0.00",
            "commission_status": "已结算",
            "settle_plan_time": "",
            "id_name_price": [{
                "product_id": "79339",
                "product_name": "周杰伦地表最强bate1(测试排期,不要改动)",
                "price": "480.00",
                "ticket_id": "381669"
            }, {
                "product_id": "79339",
                "product_name": "周杰伦地表最强bate1(测试排期,不要改动)",
                "price": "400.00",
                "ticket_id": "381681"
            }, {
                "product_id": "79339",
                "product_name": "周杰伦地表最强bate1(测试排期,不要改动)",
                "price": "480.00",
                "ticket_id": "381682"
            }]
        }];

        var tableHtml = ‘‘;
        for(var i=0;i<dataArray.length;i++){
            if(dataArray[i].id_name_price.length<=1){
                tableHtml += ‘<tr>‘;
                tableHtml +=    ‘<td>‘+ dataArray[i].order_sn +‘</td>‘;
                tableHtml +=    ‘<td>‘+ dataArray[i].add_time +‘</td>‘;
                tableHtml +=    ‘<td>‘+ dataArray[i].order_status +‘</td>‘;
                tableHtml +=    ‘<td>‘+ dataArray[i].id_name_price[0].product_name +‘</td>‘;
                tableHtml +=    ‘<td>‘+ dataArray[i].id_name_price[0].price +‘</td>‘;
                tableHtml +=    ‘<td>‘+ dataArray[i].id_name_price[0].ticket_id +‘</td>‘;
                tableHtml += ‘</tr>‘;
            }else{
                tableHtml += ‘<tr>‘;
                tableHtml += ‘<td rowspan="‘ + dataArray[i].id_name_price.length + ‘">‘ + dataArray[i].order_sn + ‘</td>‘;
                tableHtml += ‘<td rowspan="‘ + dataArray[i].id_name_price.length + ‘">‘ + dataArray[i].add_time + ‘</td>‘;
                tableHtml += ‘<td rowspan="‘ + dataArray[i].id_name_price.length + ‘">‘ + dataArray[i].order_status + ‘</td>‘;
                tableHtml += ‘<td>‘ + dataArray[i].id_name_price[0].product_name + ‘</td>‘;
                tableHtml += ‘<td>‘ + dataArray[i].id_name_price[0].price + ‘</td>‘;
                tableHtml += ‘<td>‘ + dataArray[i].id_name_price[0].ticket_id + ‘</td>‘;
                tableHtml += ‘</tr>‘;
                var unitArray = dataArray[i].id_name_price;
                for(var j=1;j<unitArray.length;j++){
                        tableHtml += ‘<tr>‘;
                        tableHtml += ‘<td>‘ + unitArray[j].product_name + ‘</td>‘;
                        tableHtml += ‘<td>‘ + unitArray[j].price + ‘</td>‘;
                        tableHtml += ‘<td>‘ + unitArray[j].ticket_id + ‘</td>‘;
                        tableHtml += ‘</tr>‘;
                }
            }
        }

        var tableEl = document.getElementById(‘demoTable‘);
        tableEl.innerHTML = tableHtml;

</script>
</body>
</html>

原文地址:https://www.cnblogs.com/lw5116/p/8513256.html

时间: 2024-11-09 10:18:24

table合并单元格demo的相关文章

table合并单元格

新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

table合并单元格 colspan(跨列)和rowspan(跨行)

colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为“3”, 令所在单元格横跨了三列.如果我们将colspan设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元

table 合并单元格方法

<span style="font-family:Microsoft YaHei;font-size:14px;">//合并单元格 function cellHandler(){ var tab = document.getElementById("data_table"); //maxCol循环列 var maxCol = 2, val, count, start; for(var col = maxCol-1; col >= 0 ; col--

一种HTML table合并单元格的思路

/** * 合并单元格 * @param table1 表格的ID * @param startRow 起始行 * @param col 合并的列号,对第几列进行合并(从0开始).如果传下来为0就是从第一列开头到结束合并 */ function mergeCell(table1, startRow, mergeColArr){ var tb = document.getElementById(table1); var endRow=tb.rows.length; var colLen = tb.

bootstrap table合并单元格(该版本是简单的应用)

//获取列表数据 function loadTableData(tableId, request, data) { $.ajax({ type : "GET", url : request, contentType : 'application/json', dataType : "json", data : data, success : function(json) { //从后台获取到数据后进行表格的渲染 $('#featureBusinessClassify

table合并单元格colspan和rowspan

colspan和rowspan这两个属性用于创建特殊的表格. colspan是"column span(跨列)"的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为"3", 令所在单元格横跨了三列.如果我们将colspan设为"2",则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器

兄弟连学Python(06)---- table合并单元格colspan和rowspan

colspan和rowspan这两个属性用于创建特殊的表格. colspan是"column span(跨列)"的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为"3", 令所在单元格横跨了三列.如果我们将colspan设为"2",则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器

Html table 合并单元格

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ol> 9 <li>基本表格</li> 10 <table border="2" bord

css——table合并单元格

参考:https://www.cnblogs.com/yangwang12345/p/7840253.html 合并列——colspan 合并行——rowspan 合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的列会少一列 示意图: html: <table border="1" style={{margin:200}}> <tbody> <tr>