注册 登录
编程论坛 → JavaScript论坛

JS动态表格时怎么让新增表格居于下方

pailameng 发布于 2020-06-04 16:29， 1850 次点击
只有本站会员才能查看附件，请 登录

程序代码：
{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}



1 回复
#2
pailameng2020-06-04 16:36
其中，高压侧为动态增加的表格，整体被FORM包裹。
（1）、1档是默认的录入框，为一个TABLE，ID均为默认；
（2）、2档、3档是新增的录入框，为一个TABLE，ID均为默认；
现有方法，1档数据可以写入数据库，2、3......数据暂时没有做传参绑定。新增如2、3......档数据，实际位置应该在1档之下。
当我改变ID值为“ID=TABLE1”时，新增录入框不起作用。
现在的问题是，如何使新增档位数据的录入框居于1档之下？
1
©2025, BC-CN.NET
电脑版