本篇文章给大家带来的内容是关于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>    <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>    <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)+"");

 } 
 }

 }