JS动态表格时怎么让新增表格居于下方
程序代码:
{extend name="template/base" /} {block name="content"} <div class="page-container"> <form class="form form-horizontal" id="form" method="post" action="{:url('addReport')}" > <input type="hidden" name="form" value="{$vo.id ?? ''}"> <div class="shiyan-cl"> <div class="table-shiyan"> <span class="c-red">*</span> <label class="shiyan-text">试验地点:</label> <input type="text" name="testAddress" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> <span class="c-red">*</span> <label class="shiyan-text">运行编号:</label> <input type="text" name="runNumber" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> <span class="c-red">*</span> <label class="shiyan-text">试验性质:</label> <input type="text" name="testType" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> <span class="c-red">*</span> <label class="shiyan-text">试验时间:</label> <input type="text" name="testTime" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> <span class="c-red">*</span> <label class="shiyan-text">相对湿度:</label> <input type="text" name="relativeHumidity" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> <span class="c-red">*</span> <label class="shiyan-text">天气温度:</label> <input type="text" name="relativeTem" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/><br> <span class="c-red">*</span> <label class="shiyan-text">设备型号:</label> <input type="text" name="equipmentType" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> <span class="c-red">*</span> <label class="shiyan-text">额定电压:</label> <input type="text" name="ratedVol" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> <span class="c-red">*</span> <label class="shiyan-text">联结组别:</label> <input type="text" name="linkGroup" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> <span class="c-red">*</span> <label class="shiyan-text">出厂编号:</label> <input type="text" name="factoryNumber" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> <span class="c-red">*</span> <label class="shiyan-text">出厂时间:</label> <input type="text" name="factoryTime" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> <span class="c-red">*</span> <label class="shiyan-text">制造厂家:</label> <input type="text" name="factory" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan" > <select name="group_id" class="select-shiyan" > <option value="0" selected="selected" ><span class="c-red">*</span>请选择电压等级</option> <option value="1">110KV</option> <option value="2">35kv</option> <option value="2">10kv</option> </select> <select name="group_id" class="select-shiyan" > <option value="0" selected="selected" ><span class="c-red">*</span>请选择变电站名</option> <option value="1">新店变电站</option> <option value="2">坛山变电站</option> <option value="2">成皋变电站</option> </select> <select name="group_id" class="select-shiyan" > <option value="0" selected="selected" ><span class="c-red">*</span>请选择设备类别</option> <option value="1">主变</option> <option value="2">开关</option> </select> </div><br> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> 一、<b>绕组绝缘电阻、吸收比测量</b><br> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> <table> <thead> <tr> <th>测量部位</th> <th>R15”(GΩ)</th> <th>R60”(GΩ)</th> <th>吸收比</th> </tr> </thead> <tbody> <tr> <td data-label="测量部位">高压/中、低及地</td> <td data-label="R15”(GΩ)"> <input type="text" name="hr15s" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="R60”(GΩ)"> <input type="text" name="hr60s" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="吸收比"> <input type="text" name="hml_ratio" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> <tr> <td data-label="测量部位">中/高、低及地</td> <td data-label="R15”(GΩ)"> <input type="text" name="mr15s" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="R60”(GΩ)"> <input type="text" name="mr60s" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="吸收比"> <input type="text" name="mhl_ratio" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> <tr> <td data-label="测量部位">低压/高、中及地</td> <td data-label="R15”(GΩ)"> <input type="text" name="lr15s" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="R60”(GΩ)"> <input type="text" name="lr60s" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="吸收比"> <input type="text" name="lhm_ratio" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> </tbody> </table> </div> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> 二、<b>测量绕组连同套管一起的介质损失角正切值tgδ%: 油温: <input type="text" name="oil_temperature" class="shiyan-input" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> ℃ </b><br> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> <table> <thead> <tr> <th>测量部位</th> <th>试验电压(KV)</th> <th>CX(nF)</th> <th>tgδ%</th> <th>20°c tgδ%</th> </tr> </thead> <tbody> <tr> <td data-label="测量部位">高压/中、低及地</td> <td data-label="试验电压(KV)"> <input type="text" name="h_voltage" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="CX(nF)"> <input type="text" name="h_cx" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="tgδ%"> <input type="text" name="h_tg" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="20°c tgδ%"> <input type="text" name="h_20tg" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> <tr> <td data-label="测量部位">中/高、低及地</td> <td data-label="试验电压(KV)"> <input type="text" name="m_voltage" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="CX(nF)"> <input type="text" name="m_cx" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="tgδ%"> <input type="text" name="m_tg" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="20°c tgδ%"> <input type="text" name="m_20tg" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> <tr> <td data-label="测量部位">低压/高、中及地</td> <td data-label="试验电压(KV)"> <input type="text" name="l_voltage" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="CX(nF)"> <input type="text" name="l_cx" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="tgδ%"> <input type="text" name="l_tg" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="20°c tgδ%"> <input type="text" name="l_20tg" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> </tbody> </table> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> 三、<b>绕组直流电阻测量:(mΩ) 油温: <input type="text" name="oil_temperature_dc" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> ℃ </b><br> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> <caption>高压侧</caption><br> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> <table> <thead> <tr> <th>档位\相别</th> <th>AB</th> <th>BC</th> <th>CA</th> <th>误差</th> </tr> </thead> <tbody> <div name="table"> <tr> <td><input type="text" id="id" name="tap position" class="shiyan-input2" align="center" style= "margin: 5px 5px 0pt; text-align: left"/></td> <td><input type="text" id="name" name="h_1_ra"class="shiyan-input2" align="center" style= "margin: 5px 5px 0pt; text-align: left"/></td> <td><input type="text" id="gender"name="h_1_rb" class="shiyan-input2" align="center" style= "margin: 5px 5px 0pt; text-align: left"/></td> <td><input type="text" id="gender" name="h_1_rc" class="shiyan-input2" align="center" style= "margin: 5px 5px 0pt; text-align: left"/></td> <td><input type="text" id="gender" name="h_1_dataerror" class="shiyan-input2" align="center" style= "margin: 5px 5px 0pt; text-align: left"/></td> <td><input type="button" value="添加" id="btn_add" class="btn btn-primary radius" ></td> </tr> </div> </tbody> </table> </div> <div class="extends" > <div class="extends_item" style="height:auto;width:100%; padding-left:1%" > <div style="height:auto;width:100%;" id="div1"></div> </div> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> <b>中压侧</b><br> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> <table> <thead> <tr> <th>档位\相别</th> <th>A0</th> <th>B0</th> <th>C0</th> <th>误差</th> </tr> </thead> <tbody> <tr> <td data-label="档位\相别">1</td> <td data-label="A0"> <input type="text" name="m_1_ra" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="B0"> <input type="text" name="m_1_rb" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="C0"> <input type="text" name="m_1_rc" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="误差"> <input type="text" name="m_1_dataerror" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> <tr> <td data-label="档位\相别">2</td> <td data-label="A0"> <input type="text" name="m_2_ra" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="B0"> <input type="text" name="m_2_rb" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="C0"> <input type="text" name="m_2_rc" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="误差"> <input type="text" name="m_2_dataerror" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> <tr> <td data-label="档位\相别">3</td> <td data-label="A0"> <input type="text" name="m_3_ra" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="B0"> <input type="text" name="m_3_rb" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="C0"> <input type="text" name="m_3_rc" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="误差"> <input type="text" name="m_3_dataerror" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> <tr> <td data-label="档位\相别">4</td> <td data-label="A0"> <input type="text" name="m_4_ra" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="B0"> <input type="text" name="m_4_rb" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="C0"> <input type="text" name="m_4_rc" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="误差"> <input type="text" name="m_4_dataerror" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> <tr> <td data-label="档位\相别">5</td> <td data-label="A0"> <input type="text" name="m_5_ra" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="B0"> <input type="text" name="m_5_rb" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="C0"> <input type="text" name="m_5_rc" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="误差"> <input type="text" name="m_5_dataerror" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> </tbody> </table> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> <b>低压侧</b><br> </div> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="table-shiyan"> <table> <thead> <tr> <th>档位\相别</th> <th>A0</th> <th>B0</th> <th>C0</th> <th>误差</th> </tr> </thead> <tbody> <tr> <td data-label="档位\相别"> 1 </td> <td data-label="A0"> <input type="text" name="l_1_ra" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="B0"> <input type="text" name="l_1_rb" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="C0"> <input type="text" name="l_1_rc" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> <td data-label="误差"> <input type="text" name="l_1_dataerror" class="shiyan-input1" align="center" style= "margin: 5px 5px 0pt; text-align: left"/> </td> </tr> </tbody> </table> </div> <div class="row cl"> <div class="col-xs-3 col-sm-3" align="center" style= "margin: 5px 5px 0pt; text-align: left"></div> <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3 style= "text-align:center"> <button type="submit" class="btn btn-primary radius" >提交</button> <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">取消</button> </div> </div> </form> </div> {/block} {block name="script"} <script src=""></script> <style> .table2{ width: 100%; empty-cells: show; background-color: transparent; border-collapse: collapse; border-spacing: 0; } .shiyan-input1 { font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, "WenQuanYi Micro Hei", Verdana, sans-serif, "宋体"; font-size: 14px; line-height: 21px; overflow-wrap: break-word; padding: 4px; box-sizing: border-box; border: solid 1px #ddd; width: 25%; } </style> <script> //添加 document.getElementById("btn_add").onclick = function () { //获取文本框内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; // 获取table var table = document.getElementsByName("table")[0]; table.innerHTML+= "<table>"+ "<div>"+ "<tr>\n" + " <td>"+"<input class=\"shiyan-input2\">"+"</input>"+"</td>\n" + " <td>"+"<input class=\"shiyan-input2\">"+"</input>"+"</td>\n" + " <td>"+"<input class=\"shiyan-input2\">"+"</input>"+"</td>\n" + " <td>"+"<input class=\"shiyan-input2\">"+"</input>"+"</td>\n" + " <td>"+"<input class=\"shiyan-input2\">"+"</input>"+"</td>\n" + " <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" class=\"btn btn-default radius ml-20;\" >删除</a></td>\n" + "</tr>"+ "<div class=\"col-xs-3 col-sm-3\" align=\"center\" style=\"margin: 5px 5px 0pt; text-align: left\">"+ "</div> "+ "<div>"+ "<table>" } //删除方法 function delTr(obj) { var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> {/block}