jQuery+HTML動態表格的實現
阿新 • • 發佈：2019-01-08
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <head> <title>動態表格</title> <script type="text/javascript" src="js/plugins/jquery-1.7.min.js"></script> <style type="text/css"> .div{ width: 95%; float: left; margin-top: 30px; align: center; margin: 0 auto; } .tableStyle { display: none; border-collapse: collapse; width:50%; } td { font-size:12px; height:25px; border:1px solid #CCD5E8; } .btn { font-size:12pt; color: #003399; border: 1px #003399 solid; color:#006699; border-bottom: #93bee2 1px solid; border-left: #93bee2 1px solid; border-right: #93bee2 1px solid; border-top: #93bee2 1px solid; background-color: #e8f4ff; cursor: pointer; font-style: normal ; width:80px; height:22px; font-family:Verdana;font-family:Georgia;_font-family:Tahoma; padding:0 10px 1px;padding:3px 3px 1px;_padding:0 4px 1px; line-height:18px;line-height:14px;_line-height:16px; } </style> </head> <body> <div class="div"> <select id="select" name="select"> <option value="0">--請選擇--</option> <option value="1" class="s">載重</option> <option value="2" class="s">速度</option> </select><br/><br/> <button onclick="showTable()">點選填寫引數</button><br/><br/> <div id="showTable"> <table class="tableStyle" id="table"> <thead> <tr> <th width="50px">操作</th> <th width="50px">結果</th> </tr> </thead> <tbody> <tr id="StructureRight"> <td><input id="btnAddRow" class="btn" onclick="addRow()" type="button" value="+" /></td> <td></td> </tr> </tbody> </table> </div> </div> <script language="javascript" type="text/javascript"> var rowCount = 1; var colCount = 2; // 獲取下拉列表的值，以賦上點選事件 window.onload = function () { var sel = document.getElementsByName("select")[0]; sel.onchange = function () { var val = this.value; switch (val){ case "0": //addCol(); break; case "1": addColDL(); break; case "2": addColV(); break; } } } var html=''; //點擊出現表格 function showTable() { document.getElementById("table").style.display = document.getElementById("table").style.display=="none"?"block":"none"; } //增載入重列 function addColDL(){ colCount++; $th = $("<th>載重</th>"); $col = $("<td><input/></td>"); $("#table>thead>tr").append($th); $("#table>tbody>tr").append($col); } //增加速度列 function addColV(){ colCount++; $th = $("<th>速度</th>"); $col = $("<td><input/></td>"); $("#table>thead>tr").append($th); $("#table>tbody>tr").append($col); } //增加行 function addRow(){ rowCount++; for(var i=0;i<colCount-2;i++){ html += '<td><input/></td>'; } var rowTemplate = '<tr class="tr_'+rowCount+'"><td><input id="btnAddRow" class="btn" onclick=delRow(this) type="button" value="-" /></td><td></td>'+html+'</tr>'; var tableHtml = $("#table tbody").html(); tableHtml += rowTemplate; $("#table tbody").html(tableHtml); html=''; } //刪除行 function delRow(obj){ var res = confirm('確認要刪除嗎？'); if(res == true) { $(obj).parents("tr").remove(); } rowCount--; } </script> </body> </html>