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}
