자바스크립트에서 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=''></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 src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/43175d7def59bcc1bd37d9b79fab8d0b-0.jpg" class="lazy" alt='' src='${ctxStatic}/images/add.jpg' style='height:21px; width:24px;margin-top: 8px;'> </a>    <a id='delet"+tempRow+"' onclick='delRows("+tempRow+")'> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/43175d7def59bcc1bd37d9b79fab8d0b-0.jpg" class="lazy" 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 src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/43175d7def59bcc1bd37d9b79fab8d0b-0.jpg" class="lazy" alt='' src='${ctxStatic}/images/add.jpg' style='height:21px; width:24px; margin-top: 8px;'> </a>    <a id='delet"+shu+"' onclick='delRows("+shu+")'> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/43175d7def59bcc1bd37d9b79fab8d0b-0.jpg" class="lazy" 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)+""); } } }
로봇: | 그룹 이름: | 로봇을 먼저 선택해주세요! |
![]() |
# 🎜 🎜#
tabs_javascript 기술을 동적으로 추가하고 삭제하는 javascript 메서드
#🎜 🎜#
위 내용은 자바스크립트에서 td 태그와 tr 태그를 동적으로 추가하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Java의 난수 생성기 안내. 여기서는 예제를 통해 Java의 함수와 예제를 통해 두 가지 다른 생성기에 대해 설명합니다.

Java의 Weka 가이드. 여기에서는 소개, weka java 사용 방법, 플랫폼 유형 및 장점을 예제와 함께 설명합니다.

Java의 Smith Number 가이드. 여기서는 정의, Java에서 스미스 번호를 확인하는 방법에 대해 논의합니다. 코드 구현의 예.

이 기사에서는 가장 많이 묻는 Java Spring 면접 질문과 자세한 답변을 보관했습니다. 그래야 면접에 합격할 수 있습니다.

Java 8은 스트림 API를 소개하여 데이터 컬렉션을 처리하는 강력하고 표현적인 방법을 제공합니다. 그러나 스트림을 사용할 때 일반적인 질문은 다음과 같은 것입니다. 기존 루프는 조기 중단 또는 반환을 허용하지만 스트림의 Foreach 메소드는이 방법을 직접 지원하지 않습니다. 이 기사는 이유를 설명하고 스트림 처리 시스템에서 조기 종료를 구현하기위한 대체 방법을 탐색합니다. 추가 읽기 : Java Stream API 개선 스트림 foreach를 이해하십시오 Foreach 메소드는 스트림의 각 요소에서 하나의 작업을 수행하는 터미널 작동입니다. 디자인 의도입니다

Java의 TimeStamp to Date 안내. 여기서는 소개와 예제와 함께 Java에서 타임스탬프를 날짜로 변환하는 방법에 대해서도 설명합니다.

캡슐은 3 차원 기하학적 그림이며, 양쪽 끝에 실린더와 반구로 구성됩니다. 캡슐의 부피는 실린더의 부피와 양쪽 끝에 반구의 부피를 첨가하여 계산할 수 있습니다. 이 튜토리얼은 다른 방법을 사용하여 Java에서 주어진 캡슐의 부피를 계산하는 방법에 대해 논의합니다. 캡슐 볼륨 공식 캡슐 볼륨에 대한 공식은 다음과 같습니다. 캡슐 부피 = 원통형 볼륨 2 반구 볼륨 안에, R : 반구의 반경. H : 실린더의 높이 (반구 제외). 예 1 입력하다 반경 = 5 단위 높이 = 10 단위 산출 볼륨 = 1570.8 입방 단위 설명하다 공식을 사용하여 볼륨 계산 : 부피 = π × r2 × h (4
