Method to dynamically add td tags and tr tags in javascript (code)

The content of this article is about the method (code) of dynamically adding td tags and tr tags in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

//新增机器人信息的 
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=&#39;&#39;></option>";
        <c:forEach items="${robolist}" var="r">
            ss+="<option value=&#39;${r.robotserialno}&#39;>${r.robotnickname}</option>";
        </c:forEach>

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

             }    
        }

    }

Robot:

Group name:

Please select the robot first!

related suggestion:

Javascript method to dynamically add and delete tabs tags_javascript skills

Method to dynamically add styles to HTML tags returned by Ajax

The above is the detailed content of Method to dynamically add td tags and tr tags in javascript (code). For more information, please follow other related articles on the PHP Chinese website!