jquery+Bootstrap自定义表格

<table style="100%;text-align:center;margin:30px 10px 10px 10px;border:1px solid #E3E3E3" border="1" cellspacing="10" id="tabData" class="tab table-striped table-hover">
                    <thead style="background-color:#299ef5">
                        <tr style="color:white">
                            <td rowspan="2" style="10%;height:60px;">排名</td>
                            <td rowspan="2" style="15%">区域</td>
                            <td colspan="3" style="25%;height:30px;">综合能耗</td>
                            <td colspan="3" style="25%">总产值</td>
                            <td colspan="3" style="25%">万元产值能耗</td>
                        </tr>
                        <tr style="color:white">
                            <td style="height:30px;">本期</td>
                            <td>同期</td>
                            <td>增幅</td>
                            <td>本期</td>
                            <td>同期</td>
                            <td>增幅</td>
                            <td>本期</td>
                            <td>同期</td>
                            <td>增幅</td>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

 js部分:

//加载表格内容
function initTable() {
    var temp = "";
    if ($("#ckaaaa").hasClass("checked")) {
        temp = "Sum";
    } else {
        temp = "MCEC";
    }
  //条件选项
var time = $('#attYearMonth').datebox('getValue'); var zone = $("#RegionID").combobox("getValue").toString(); debugger; $.ajax({ url: "", dataType: "json", //返回格式为json async: true,//请求是否异步,默认为异步,这也是ajax重要特性 data: { time: time,zone:zone,order:temp }, //参数值 type: "post", //请求方式 success: function (data) { var body = ""; for (var i = 0; i < data.length; i++){ var temp = "<tr style='height:30px;'><td>" + (i + 1) + "</td><td>" + data[i].ZoneName + "</td><td>" + data[i].EneryConsumeNow + "</td><td>" + data[i].EneryConsumeBefore + "</td><td>" + data[i].ECRiseRate + "</td><td>" + data[i].TotalOutputNow + "</td><td>" + data[i].TotalOutputBefore + "</td><td>" + data[i].TORiseRate + "</td><td>" + data[i].AverageNow + "</td><td>" + data[i].AverageBefore + "</td><td>" + data[i].RiseRate + "</td></tr>" + "/n"; body += temp; } $("#tabData tbody").html(""); //清空 $("#tabData tbody").html(body); } }); }

  【根据单选框切换表格】 

<div style=" 110px; display:inline-block;" id="radioUseOne">
                        <input name="orders" type="radio" value="Sum">
                        <label for="aa" id="ckaaaa" class="checked" style="display:flex;align-items:center;">
                            <em></em>
                            <span style="font-size:13px;font-weight:normal">按A排名</span>
                        </label>
                    </div>
                    <div style=" 150px; display:inline-block;" id="radioMCECTwo">
                        <input name="orders" type="radio" value="MCEC">
                        <label for="aa" id="ckbbbb" style="display:flex;align-items:center;">
                            <em></em>
                            <span style="font-size:13px;font-weight:normal">按B排名</span>
                        </label>
                    </div>
$("#radioUseOne").click(function () {
                $("#ckaaaa").addClass("checked");
                $("#ckbbbb").removeClass("checked");
                initTable();
            })
            $("#radioMCECTwo").click(function () {
                $("#ckbbbb").addClass("checked");
                $("#ckaaaa").removeClass("checked");
                initTable();
            })
记录编程的点滴,体会学习的乐趣
原文地址:https://www.cnblogs.com/AduBlog/p/13454252.html