制作简单的表格，在Html只需要写table父级标签下的tr标签，以及tr父级标签下的th标签就可以实现一张简单的表格。
<table id="tbSelectDIDInfo" class="bsgrid fsize" style="width:100%;">
<tr>
<th w_num="total_line">NO.序号</th>
<th w_index="DidContentID" w_check="true">选择</th>
<th w_length ="30" w_index="DidName">DID(hex)</th>
<th w_length ="30" w_index="DidDescription">Data Description</th>
<th w_index="DataType">Data Type</th>
</tr>
</table>
这只是制作表格的头部样式而已，表格的数据想要显示的话就要与table标签同级的tbody标签下添加tr标签，然后在tr标签再添加td标签就可以实现表格数据显示。
前面只是介绍如何在Html制作一张简单的表格，但如果有需求方提出制作出下面的表格形式去接受数据的话，那么怎么制作table的表格样式呢？
其实表格的table出现这样的样式其实是在th标签设置rowspan和colspan属性就可以了。Rowspan属性是规定表头单元格可横跨的行数，而colspan属性是规定表头单元格可横跨的列数，仅此而已。
那么下面是我写的具体的table表头样式，仅供参考！
<table class="bsgrid" id="tabDIDlist" style="width:100%">
<tr>
<th rowspan="2" w_num="total_line">No.序号</th>
<th rowspan="2" w_index="DidEcuSupID" width="12%" w_check="true">选择</th>
<th rowspan="2" w_index="MoudelName">模块</th>
<th rowspan="2" w_index="SupplierName">供应商</th>
<th width="60%;" colspan="9">DID信息</th>
</tr>
<tr>
<th rowspan="1">DID(hex)</th>
<th rowspan="2">Data Description</th>
<th rowspan="2">Data Type</th>
</tr>
<tbody id="DIDlistBody">
</tbody>
</table>
既然表格的表头已经制定了，怎么制定它的表格内容的数据呢，我们发现表格的显示的方式跟table表格是相同的，那么也是不是跟th的那两个rowspan和colspan属性去设置的呢，原理都是一样的。只不过要怎么动态去生成table表格数据了。
下面截图的代码是请求数据库的数据来显示在表格的，也就是说动态的数据了；
var isOpenBool = true;
var countPage = null;
function DIDInfo(pageSize, curPage, EcuName, SupplierName)
{
$.ajaxSettings.async = false;
var trLen = null, num = (curPage - 1) * pageSize + 1;
var EcuSup = [], listDID = [], OneCountDid = [], rowColor;
$("#DIDlistBody").empty();
$.post("listEcuSupInfo",
{
curPage: curPage, EcuName: EcuName,
Supplier: SupplierName,
pageSize: pageSize,
}, function (data) {
trLen = data.totalRows;//数据行记录,
EcuSup.push(data.data);
});
$.post("selectDidInfobase", function (data) { listDID.push(data) });
$.post("oneDidCount", function (data) { OneCountDid.push(data) });
if (EcuSup[0].length > 0) {
for (var i = 0; i < EcuSup[0].length; i++) {
rowColor = (i + 1) % 2;
rowSpan = '';
if (EcuSup[0][i].RelevanceId + 1 != 2)
rowSpan = 'rowspan = ' + (EcuSup[0][i].RelevanceId + 1) + '';
if (rowSpan == '') {
var strtd = "";
for (var f = 0; f < OneCountDid[0].length; f++) {
if (OneCountDid[0][f].DidEcuSupID == EcuSup[0][i].DidEcuSupID) {
strtd = "<td>" + OneCountDid[0][f].DidName + "</td>" +
"<td>" + OneCountDid[0][f].DidDescription + "</td>" +
"<td>" + OneCountDid[0][f].DataType + "</td>";
break;
}
}
$("#DIDlistBody")[0].innerHTML += "<tr class='tr" + rowColor + "'>" +
"<td " + rowSpan + ">" + (num++) + "</td>" +
"<td " + rowSpan + " οnclick= 'changeChecked(this)'><input style='width:26px;height:19px' type= 'checkbox' value=" + EcuSup[0][i].DidEcuSupID + "></td>" +
"<td " + rowSpan + ">" + EcuSup[0][i].MoudleName + "</td>" +
"<td " + rowSpan + ">" + EcuSup[0][i].SupplierName + "</td>" +
strtd +
"</tr>";
} else {
$("#DIDlistBody")[0].innerHTML += "<tr class='tr" + rowColor + "'>" +
"<td " + rowSpan + ">" + ((num++)) + "</td>" +
"<td " + rowSpan + " οnclick= 'changeChecked(this)'><input style='width:26px;height:19px' type= 'checkbox' value=" + EcuSup[0][i].DidEcuSupID + "></td>" +
"<td " + rowSpan + ">" + EcuSup[0][i].MoudleName + "</td>" +
"<td " + rowSpan + ">" + EcuSup[0][i].SupplierName + "</td>" +
"</tr>";
for (var j = 0; j < listDID[0].length; j++) {
if (listDID[0][j].DidEcuSupID == EcuSup[0][i].DidEcuSupID) {
$("#DIDlistBody")[0].innerHTML += "<tr class='tr" + rowColor + "'>" +
"<td>" + listDID[0][j].DidName + "</td>" +
"<td>" + listDID[0][j].DidDescription + "</td>" +
"<td>" + listDID[0][j].DataType + "</td>" +
"</tr>";
}
}
}
}
}
else {
$("#DIDlistBody")[0].innerHTML += '<tr><td colspan="7" class="lineNoWrap">没有数据可以用于显示。</td></tr>';
}
}
这样的话table的数据显示的格式就设置出了，但表格没有分页的的表格不算是一张真正的table表格。
下面的代码是有关表格分页的代码的截图，代码仅供参考！
var str = '<table id="tabDIDlist_pt_outTab" class="bsgridPagingOutTab" style="min-width: 446px; width: 734px;">'
+ '<tbody><tr><td align="right" id="tabDIDlist_pt"><table class="bsgridPaging pagingLittleToolbar noPageSizeSelect">'
+ '<tbody><tr><td> <select id="tabDIDlist_pt_pageSize"><option value="3">1页/3条</option><option value="6">1页/6条</option><option value="10">1页/10条</option></select></td>'
+ '<td> <span id="tabDIDlist_pt_startRow">1</span> - <span id="tabDIDlist_pt_endRow"></span>'
+ '</td><td>共: <span id="tabDIDlist_pt_totalRows"></span></td><td>'
+ '<input class="pagingBtn firstPage" type="button" id="tabDIDlist_pt_firstPage" value=""> <input class="pagingBtn prevPage" type="button" id="tabDIDlist_pt_prevPage" value="">'
+ '</td><td><div><span id="tabDIDlist_pt_curPage">1</span> / <span id="tabDIDlist_pt_totalPages">9</span></div></td><td>'
+ '<input class="pagingBtn nextPage" type="button" id="tabDIDlist_pt_nextPage" value=""> <input class="pagingBtn lastPage" type="button" id="tabDIDlist_pt_lastPage" value="">'
+ '</td><td class="gotoPageInputTd"><input class="gotoPageInput" type="text" id="tbEcuOne_pt_gotoPageInput"></td>'
+ '<td class="gotoPageButtonTd"><input class="pagingBtn gotoPage" type="button" id="tabDIDlist_pt_gotoPage" value=""></td>'
+ '<td class="refreshPageTd"><input class="pagingBtn refreshPage" type="button" id="tabDIDlist_pt_refreshPage" value=""></td></tr></tbody></table></td></tr></tbody></table>'
var $tabDIDlist = document.getElementById('tabDIDlist_pt_outTab');
if ($tabDIDlist == null) {
$("#tabDIDlist").after(str);
}
if (trLen < pageSize) {
pageSize = trLen;
}
countPage = Math.ceil(trLen / pageSize);//总页数
var $starRow = $("#tabDIDlist_pt_startRow");
var $endRow = $("#tabDIDlist_pt_endRow");
var $curPage = $("#tabDIDlist_pt_curPage");
var $totalPages = $("#tabDIDlist_pt_totalPages");
var $totalRows = $("#tabDIDlist_pt_totalRows");
if (isNaN(countPage)) {
curPage = 0;
countPage = 0;
}
$curPage.text(curPage);
$starRow.text(curPage);
$endRow.text(countPage);
$totalPages.text(countPage);
$totalRows.text(trLen + "条");
var page = 1;//起始页
if (isOpenBool) {
disableClsPre();
$("#tabDIDlist_pt_firstPage").on("click", function () {
var $curPages = parseInt($curPage.text());
if ($curPages > 1) {
$starRow.text("1");
$curPage.text("1");
DIDInfo(pageSize, 1, "", "");
ableClsPrev();
disableClsPre();
} else {
layer.msg("已经是第一页！", { icon: 6, offset: '180px' });
}
})
$("#tabDIDlist_pt_prevPage").on("click", function () {
var $curPages = parseInt($curPage.text());
if ($curPages > 1) {
$curPages -= 1;
$starRow.text($curPages);
$curPage.text($curPages);
DIDInfo(pageSize, $curPages, "", "");
ableClsPrev();
if ($curPages == 1) {
disableClsPre();
}
} else {
layer.msg("已经是第一页！", { icon: 6, offset: '180px' });
}
})
$("#tabDIDlist_pt_nextPage").on("click", function () {
var $curPages = parseInt($curPage.text());
if ($curPages < countPage) {
$curPages += 1;
$starRow.text($curPages);
$curPage.text($curPages);
DIDInfo(pageSize, $curPages, "", "");
ableClsNext();
if ($curPages == countPage) {
disableClsNext();
}
}
else {
layer.msg("已经是最后一页", { icon: 6, offset: '180px' });
}
})
$("#tabDIDlist_pt_lastPage").on("click", function () {
var $curPages = parseInt($curPage.text());
if ($curPages < countPage) {
$starRow.text(countPage);
$curPage.text(countPage);
DIDInfo(pageSize, countPage, "", "");
ableClsNext();
disableClsNext();
}
else {
layer.msg("已经是最后一页", { icon: 6, offset: '180px' });
}
})
$("#pagingBtn gotoPage").on("click", function () {
})
$("#tabDIDlist_pt_refreshPage").on("click", function () {
var index = layer.msg('正在加载数据...', {
icon: 16
, shade: [0.6, '#393D49']
, offset: '270px'
});
setTimeout(function () {
layer.close(index);
pageSize = $("#tabDIDlist_pt_pageSize").val();
DIDInfo(pageSize, 1, "", "");
disableClsPre();
ableClsPrev();
layer.msg("刷新成功！", { icon: 1, offset: '180px' });
}, 200);
})
$("#tabDIDlist_pt_pageSize").on("change", function () {
pageSize = $("#tabDIDlist_pt_pageSize").val();
DIDInfo(pageSize, curPage, "", "");
})
isOpenBool = false;
}
function changeChecked(e) {
var checkedState = e.children[0];
if ($(checkedState).prop('checked')) {
$(checkedState).prop('checked', false); //修改设置为不选中状态
} else {
$(checkedState).prop('checked', true);//修改设置为选中状态
}
}
function ableClsNext() {
var isClsbool = $("#tabDIDlist_pt_firstPage").hasClass("disabledCls");
if (isClsbool) {
$("#tabDIDlist_pt_firstPage").removeClass("disabledCls");
$("#tabDIDlist_pt_prevPage").removeClass("disabledCls");
}
}
function ableClsPrev() {
var isClsbool = $("#tabDIDlist_pt_nextPage").hasClass("disabledCls");
if (isClsbool) {
$("#tabDIDlist_pt_nextPage").removeClass("disabledCls");
$("#tabDIDlist_pt_lastPage").removeClass("disabledCls");
}
}
function disableClsPre()
{
$("#tabDIDlist_pt_firstPage").addClass("disabledCls");
$("#tabDIDlist_pt_prevPage").addClass("disabledCls");
}
function disableClsNext()
{
$("#tabDIDlist_pt_nextPage").addClass("disabledCls");
$("#tabDIDlist_pt_lastPage").addClass("disabledCls");
}
大概总体的table表格样式如下了：
小结：本人也是花了半天才搞定的这些功能，本次只是为了分享而已，主要还是那两个rowspan和colspan属性，只有掌握这些属性基本不成问题呀！
扫一扫
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
