| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1612 人关注过本帖
标题:JS动态表格时怎么让新增表格居于下方
只看楼主 加入收藏
pailameng
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2020-6-4
收藏
 问题点数:0 回复次数:1 
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}



搜索更多相关主题的帖子: style left class align center 
2020-06-04 16:29
pailameng
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2020-6-4
收藏
得分:0 
其中,高压侧为动态增加的表格,整体被FORM包裹。
(1)、1档是默认的录入框,为一个TABLE,ID均为默认;
(2)、2档、3档是新增的录入框,为一个TABLE,ID均为默认;
现有方法,1档数据可以写入数据库,2、3......数据暂时没有做传参绑定。新增如2、3......档数据,实际位置应该在1档之下。
当我改变ID值为“ID=TABLE1”时,新增录入框不起作用。
现在的问题是,如何使新增档位数据的录入框居于1档之下?
2020-06-04 16:36
快速回复:JS动态表格时怎么让新增表格居于下方
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.047410 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved