web頁面表格、複選框、調整列寬——20181126
阿新 • • 發佈：2018-12-06
資料解析後，根據資料內容在頁面上通過表格顯示出來，同時添加了複選框和修改列寬的內容。
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body onload="init()"> <table id="tab_1" border="1" white-space="nowrap" style="margin:auto"> <thead> <tr> <th style="width: 100px; text-align:center">資料名稱</th> <th style="width: 100px; text-align:center">資料大小</th> <th style="width: 100px; text-align:center">資料來源</th> <th style="width: 100px; text-align:center">上傳時間</th> </tr> </thead> <tbody id="tableTbody"> </tbody> </table> <script> function dataSet(name,size,source,time){ this.name = name; this.size = size; this.source = source; this.time = time; } var topologyData = new Set(); topologyData.add(new dataSet("長三角1","100kb","李明","20181020")); topologyData.add(new dataSet("長三角2","800kb","張三","20181021")); topologyData.add(new dataSet("長三角3","1800kb","李四","20181022")); topologyData.add(new dataSet("長三角4","600kb","王麻子","20181023")); //初始化 function init(){ showData(); initTableCheckbox(); initTableColumnWidth(); } //建立表格 function showData(){ var str = ''; var $tbr = $('table tbody'); topologyData.forEach(function(data){ console.info( data.name + ":" + data.size); str = '<tr><td style="text-align:left">' + data.name + '</td><td style="text-align:right">' + data.size + '</td><td style="text-align:right">' + data.source + '</td><td style="text-align:right">' + data.time + '</td></tr>'; $tbr.append(str); //$("#tableTbody").append(str); }); } //新增表格複選框 function initTableCheckbox() { console.info("新增表格複選框——開始"); /*將全選/反選複選框新增到表頭最前，即增加一列*/ var $thr = $('table thead tr'); var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>'); $thr.prepend($checkAllTh); /*“全選/反選”複選框*/ var $checkAll = $thr.find('input'); $checkAll.click(function(event){ /*將所有行的選中狀態設成全選框的選中狀態*/ $tbr.find('input').prop('checked',$(this).prop('checked')); /*並調整所有選中行的CSS樣式*/ if ($(this).prop('checked')) { $tbr.find('input').parent().parent().addClass('warning'); } else{ $tbr.find('input').parent().parent().removeClass('warning'); } /*阻止向上冒泡，以防再次觸發點選操作*/ event.stopPropagation(); }); /*點選全選框所在單元格時也觸發全選框的點選操作*/ $checkAllTh.click(function(){ $(this).find('input').click(); }); var $tbr = $('table tbody tr'); var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>'); /*每一行都在最前面插入一個選中複選框的單元格*/ $tbr.prepend($checkItemTd); /*點選每一行的選中複選框時*/ $tbr.find('input').click(function(event){ /*調整選中行的CSS樣式*/ $(this).parent().parent().toggleClass('warning'); /*如果已經被選中行的行數等於表格的資料行數，將全選框設為選中狀態，否則設為未選中狀態*/ $checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false); /*阻止向上冒泡，以防再次觸發點選操作*/ event.stopPropagation(); }); /*點選每一行時也觸發該行的選中操作*/ $tbr.click(function(){ $(this).find('input').click(); }); console.info("新增表格複選框——結束"); } //調整列寬 function initTableColumnWidth(){ var tTD; //用來儲存當前更改寬度的Table Cell,避免快速移動滑鼠的問題 var table = document.getElementById("tab_1"); for (j = 0; j < table.rows[0].cells.length; j++) { table.rows[0].cells[j].onmousedown = function () { //記錄單元格 tTD = this; if (event.offsetX > tTD.offsetWidth - 10) { tTD.mouseDown = true; tTD.oldX = event.x; tTD.oldWidth = tTD.offsetWidth; } }; table.rows[0].cells[j].onmouseup = function () { //結束寬度調整 if (tTD == undefined) tTD = this; tTD.mouseDown = false; tTD.style.cursor = 'default'; }; table.rows[0].cells[j].onmousemove = function () { //更改滑鼠樣式 if (event.offsetX > this.offsetWidth - 10) this.style.cursor = 'col-resize'; else this.style.cursor = 'default'; //取出暫存的Table Cell if (tTD == undefined) tTD = this; //調整寬度 if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default'; if (tTD.oldWidth + (event.x - tTD.oldX)>0) tTD.width = tTD.oldWidth + (event.x - tTD.oldX); //調整列寬 tTD.style.width = tTD.width; tTD.style.cursor = 'col-resize'; //調整該列中的每個Cell table = tTD; while (table.tagName != 'TABLE') table = table.parentElement; for (var j = 0; j < table.rows.length; j++) { table.rows[j].cells[tTD.cellIndex].width = tTD.width; } } }; } } </script> </body> </html>