首页 > web前端 > js教程 > 正文

javascript中动态添加td标签和tr标签的方法(代码)

不言
发布: 2018-08-25 10:57:53
原创
6562人浏览过

本篇文章给大家带来的内容是关于javascript中动态添加td标签和tr标签的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

//新增机器人信息的 
function insertRows(rr){
        //var tab=document.getElementById('tableid');
        var tb1 = $("#tableid"); 
        var tempRow=parseInt($("#tableid tr").size());

        var shu=parseInt(rr)+1;
        var ss="<option value=''></option>";
        <c:forEach items="${robolist}" var="r">
            ss+="<option value='${r.robotserialno}'>${r.robotnickname}</option>";
        </c:forEach>

        if((parseInt(rr+1)== tempRow)){
            $("#tableid tr:eq("+rr+")")
            .after("
                  <tr id='tr"+tempRow+"'  >
                  <td  class='tdcss2'>机器人:</td>
                  <td class='controls'>
                  <select 
                          id='sele"+tempRow+"' 
                          name='teams["+tempRow+"].robot' value=''  
                          class='required selecss'   
                          onchange='queryGroup(this.value,"+tempRow+")'>"+ss+"</select>
                   </td>
                   <td  class='tdcss'>群名称:</td>
                   <td class='controls'>
                   <p id='ttqu"+tempRow+"'>
                   <select 
                            id='ssess"+tempRow+"' 
                            name='teams["+tempRow+"].groupname' 
                            value='' 
                            class='required selecss'>
                    </select>
                    </p>
                    </td>
                    <td class='controls'>
                    <a  id='addtian"+tempRow+"'   onclick='insertRows("+tempRow+")'>
                    <img
                     alt='' 
                     src='${ctxStatic}/images/add.jpg'  
                     style='height:21px; 
                     width:24px;margin-top: 8px;'>
                     </a> &nbsp&nbsp&nbsp<a id='delet"+tempRow+"' onclick='delRows("+tempRow+")'>
                     <img
                      alt='' 
                      src='${ctxStatic}/images/dele.jpg'  
                      style='height:21px; 
                      width:24px;margin-top: 8px;'>
                      </a>
                      </td>
                      </tr>");
        }else{

            for (i=tempRow-1;i>=shu;i--){
                $("#tr"+i).attr("id","tr"+(i+1)+"");
                 $("#delet"+i+"").attr("onclick","delRows("+(i+1)+")");
                $("#addtian"+i).attr("onclick","insertRows("+(i+1)+")");
                 $("#ttqu"+i).attr("id","ttqu"+(i+1)+"");
                 $("#delet"+i+"").attr("id","delet"+(i+1)+"");
                 $("#addtian"+i).attr("id","addtian"+(i+1)+"");
                $("#sele"+i).attr("name","teams["+(i+1)+"].robot");
                $("#sele"+i).attr("onchange","queryGroup(this.value,"+(i+1)+")");
                $("#ssess"+i).attr("name","teams["+(i+1)+"].groupname");
                $("#sele"+i).attr("id","sele"+(i+1)+"");
                $("#ssess"+i).attr("id","ssess"+(i+1)+"");
            }

            $("#tableid tr:eq("+rr+")")
            .after("<tr id='tr"+shu+"' >
            <td  class='tdcss2'>机器人:</td>
            <td class='controls'>
            <select
             id='sele"+shu+"'
              name='teams["+shu+"].robot' 
              value=''  
              class='required selecss' onchange='queryGroup(this.value,"+shu+")'>"+ss+"</select>
              </td>
              <td  class='tdcss'>群名称:</td>
              <td class='controls'>
              <p id='ttqu"+shu+"'>
              <select
               id='ssess"+shu+"' 
               name='teams["+shu+"].groupname' 
               value=''  
               class='required selecss'>
               </select>
               </p>
               </td>
               <td class='controls'>
               <a  id='addtian"+shu+"'   onclick='insertRows("+shu+")'>
               <img
                alt='' 
                src='${ctxStatic}/images/add.jpg'  
                style='height:21px;
                width:24px;
                margin-top: 8px;'>
                </a> &nbsp&nbsp&nbsp<a id='delet"+shu+"' onclick='delRows("+shu+")'>
                <img
                 alt='' 
                 src='${ctxStatic}/images/dele.jpg'  
                 style='height:21px; 
                 width:24px;margin-top: 8px;'>
                 </a>
                 </td>
                 </tr>");
        }
    } 
    //删除tr和td并且移动后面的tr和td且下标要一致 
    function delRows(sub){
        var rowNum=sub;  //此处的规律是:行号为下标+1
        var tb1 = $("#tableid");  //找table的ID
        var tempRow = $("#tableid tr").size();//获取表格的行数

        if (tempRow >rowNum){ 
        $("#tr"+sub).remove();  //删除tr
        for (i=(parseInt(sub)+1);i<tempRow;i++){
            $("#tr"+i).attr("id","tr"+(i-1)+"");
            $("#addtian"+i).attr("onclick","insertRows("+(i-1)+")");
            $("#delet"+i+"").attr("onclick","delRows("+(i-1)+")");
            $("#delet"+i+"").attr("id","delet"+(i-1)+"");
             $("#addtian"+i).attr("id","addtian"+(i-1)+"");
            $("#sele"+i).attr("name","teams["+(i-1)+"].robot");
            $("#sele"+i).attr("onchange","queryGroup(this.value,"+(i-1)+")");
            $("#ssess"+i).attr("name","teams["+(i-1)+"].groupname");
            $("#ttqu"+i).attr("id","ttqu"+(i-1)+"");
            $("#sele"+i).attr("id","sele"+(i-1)+"");
            $("#ssess"+i).attr("id","ssess"+(i-1)+"");

             }    
        }

    }
登录后复制
机器人:
群名称:

请先选择机器人!

@@##@@

相关推荐:

javascript动态添加删除tabs标签的方法_javascript技巧

慧中标AI标书
慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

慧中标AI标书 120
查看详情 慧中标AI标书

给Ajax返回的HTML标签动态添加样式的方法

立即学习Java免费学习笔记(深入)”;

20180824095338137.png

以上就是javascript中动态添加td标签和tr标签的方法(代码)的详细内容,更多请关注php中文网其它相关文章!

相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号