자바스크립트에서 td 태그와 tr 태그를 동적으로 추가하는 방법(코드)

이 글의 내용은 자바스크립트에서 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=&#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)+"");

             }    
        }

    }

로봇:

그룹 이름:

로봇을 먼저 선택해주세요!

# 🎜 🎜#

관련 권장 사항:

tabs_javascript 기술을 동적으로 추가하고 삭제하는 javascript 메서드
#🎜 🎜#

Ajax에서 반환된 HTML 태그에 동적으로 스타일을 추가하는 방법

위 내용은 자바스크립트에서 td 태그와 tr 태그를 동적으로 추가하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!