【200分】还是关于动态添加一个表格块的问题？

Question

以下是要动态生成的表格块<tbody id="req_add" style="display:none"> 这里开始<tbody id="reportBody" style="display:none">
<tr bgcolor="#ffffff" height="25">
             <td align="left" bgcolor="#FFFFFF" class="font12" nowrap="nowrap" colspan="2"><font color="#FF0000">以下由需求部门填写</font></td>

<td align="right" bgcolor="#FFFFFF" class="font12" nowrap="nowrap" colspan="3">
  <input type="button" value="增加需求" name="add_req" onClick="addRow();">
   <input type="button" value="删除需求" name="del_req" onClick="delRow();">
   <input type="button" value="取得数据测试" name="get_req" onClick="saveCollectReport(count);">
  </td></tr></tbody>
 <tbody id="req_add" style="display:none">
<tr>
<td width="31" rowspan="5"  bgcolor="#ECF3FF">
         <input type="radio" name="operation" id="operation" value="operation" />
     </td>
     <td align="left" bgcolor="#ECF3FF" class="font12">需求单位</td>
     <td width="343" align="left" bgcolor="#FFFFFF" class="font12-hei">
<input name="req_orgname1" class="form-element-mfd-normal" id="req_orgname1" type="text" value="" readonly="readonly">
<div style="display:none;">
<input name="req_org_id1" class="form-element-mfd-normal" id="req_org_id1" type="text" value="">
</div>
  </td>
     <td width="102" align="left" bgcolor="#ECF3FF" class="font12">需求部门</td>
     <td width="415" align="left" bgcolor="#FFFFFF" class="font12-hei">
<select name="req_deptname1" id="req_deptname1" onChange="delsel('1')">


</select>
     </td>
   </tr>
<tr>
<td bgcolor="#ECF3FF" class="font12">需求联系人</td>
<td bgcolor="#FFFFFF" class="font12-hei">
<div style="display:none">
<input name="req_username1" id="req_username1" value=""/>
<input name="req_userid1" id="req_userid1" value=""/>
</div>
<span class="spanStyle_purch" style="width:88%;">
<span id="Normal" name="purch_techLeader_name"><span id="tlxrname1" title="purch_techLeader_name"></span></span>
</span>
<img src="<%=basePath%>/hncmcc_web/images/purch/xuanze.gif" onClick="selectLxr('1');" style="cursor:hand;" />
</td>
<td bgcolor="#ECF3FF" class="font12">期望完成时间</td>
<td bgcolor="#FFFFFF" class="font12-hei">
<INPUT TYPE="radio" NAME="req_endtime1" id="req_endtime1" VALUE="1">一周内
<INPUT TYPE="radio" NAME="req_endtime1" id="req_endtime1" VALUE="2">季度内
<INPUT TYPE="radio" NAME="req_endtime1" id="req_endtime1" VALUE="3">年度内
</td>
</tr>

<tr>
<td bgcolor="#ECF3FF" class="font12" nowrap="nowrap">需求名称<font color="#FF0000">*</font></td>
<td bgcolor="#FFFFFF" class="font12-hei" colspan="3" nowrap="nowrap">
<input name="req_xuqiuname1" class="form-element-mfd-normal" id="req_xuqiuname1" type="text" value="">
</td>
</tr>
<tr bgcolor="#ffffff" height="25">
              <td width="80" align="left" bgcolor="#ECF3FF" class="font12" nowrap="nowrap">需求概述<font color="red" >*</font><br/></td>
             <td colspan="3" nowrap="nowrap">
<textarea  class="template-chulidan-input-normal" cols="60" style='line-height:1.5;width:100%;font-size:14px;background-color:#F0F9FF;overflow:auto;border:0px solid ;' rows="3" name="req_gaishu11" id="req_gaishu11"></textarea>
  </td>
          </tr>
<tr bgcolor="#ffffff" height="25">
              <td width="80" align="left" bgcolor="#ECF3FF" class="font12" nowrap="nowrap">需求附件<font color="red" >*</font><br/></td>
             <td colspan="3" nowrap="nowrap">
<input id="req_analyseReportAttachName1" name="req_analyseReportAttachName1" value="" type="hidden"/>
<input id="req_analyseReportAttachPath1" name="req_analyseReportAttachPath1" value="" type="hidden"/>
                      <table border="0" cellpadding="1" cellspacing="0" width="100%">
                    <tr>
                      <td class="font12" ><span id="analyseReportAttachPath1_span_id" style="text-overflow:ellipsis;overflow-x:hidden;"></span></td>
                      <td class="font12" width="150px">
   <div id="div_uploadAttButton_id"> 
<img src="<%=basePath%>/hncmcc_web/images/req/btn/upload_file.gif" onClick="reqUploadAtt('req_analyseReportAttachName1','req_analyseReportAttachPath1','analyseReportAttachPath1_span_id');" style="cursor:hand;"/> <img src="<%=basePath%>/hncmcc_web/images/req/btn/del_file.gif" onClick="reqDeleteAtt('req_analyseReportAttachName1','req_analyseReportAttachPath1','analyseReportAttachPath1_span_id');" style="cursor:hand;"/>
</div>
  </td>
                    </tr>
                  </table>




    </td>
          </tr>

</tbody>

Answer 1

我写的动态添加如下：function addRow(){
var deptsaa=document.getElementById('req_orgname1').value;
var deptsaaid = document.getElementById('req_org_id1').value;
count++;
    var tb=document.getElementById("req_add");
    for(var i=0;i<5;i++){
        var obj=tb.insertRow();
        for(var j=0;j<tb.rows[i].cells.length;j++){
            var tempTab=obj.insertCell();
            if(i==0&&j==2){
obj.cells[j].innerHTML='<input name="req_orgname' + count + '" id="req_orgname' + count + '" class="form-element-mfd-normal"  type="text" value="'+deptsaa+'" readonly="readonly"><div style="display:none;"><input name="req_org_id'+count+'" class="form-element-mfd-normal" id="req_org_id'+count+'" type="text" value="'+deptsaaid+'"></div>';
}else if(i==0&&j==4){
obj.cells[j].innerHTML='<select name="req_deptname'+ count +'" id="req_deptname'+ count +'" value="" onChange="delsel('+count+')"></select>';
}else if(i==1&&j==1){

obj.cells[j].innerHTML='<div style="display:none"><input name="req_username'+count+'" id="req_username'+count+'" value=""/><input name="req_userid'+count+'" id="req_userid'+count+'" value=""/></div><span class="spanStyle_purch" style="width:88%;"><span id="Normal" name="purch_techLeader_name"><span id="tlxrname'+count+'" title="purch_techLeader_name"></span></span></span><img src="<%=basePath%>/hncmcc_web/images/purch/xuanze.gif" onClick="selectLxr('+count+');" style="cursor:hand;" />';
}else if(i==1&&j==3){
obj.cells[j].innerHTML='<INPUT TYPE="radio" NAME="req_endtime'+count+'" id="req_endtime'+count+'" VALUE="1">一周内<INPUT TYPE="radio" NAME="req_endtime'+count+'" id="req_endtime'+count+'" VALUE="2">季度内<INPUT TYPE="radio" NAME="req_endtime'+count+'" id="req_endtime'+count+'" VALUE="3">年度内';
}else if(i==2&&j==1){
obj.cells[j].innerHTML='<input name="req_xuqiuname'+count+'" class="form-element-mfd-normal" id="req_xuqiuname'+count+'" type="text" value="">';
}else if(i==3&&j==1){
obj.cells[j].innerHTML='<textarea  class="template-chulidan-input-normal" cols="60"  rows="3" name="req_gaishu1'+count+'" id="req_gaishu1'+count+'" style="line-height:1.5;width:100%;font-size:14px;background-color:#F0F9FF;overflow:auto;border:0px solid ;"></textarea>';
}else if(i==4&&j==1){
obj.cells[j].innerHTML='<input id="req_analyseReportAttachName'+count+'" name="req_analyseReportAttachName'+count+'" value="" type="hidden">'+
'<input id="req_analyseReportAttachPath'+count+'" name="req_analyseReportAttachPath'+count+'" value="" type="hidden">'+
'<table border="0" cellpadding="1" cellspacing="0" width="100%">'+
'<tr>'+
'<td class="font12" >'+
'<span id="analyseReportAttachPath'+count+'_span_id" style="text-overflow:ellipsis;overflow-x:hidden;"></span>'+
'</td>'+
'<td class="font12" width="150px">'+
'<div id="div_uploadAttButton_id'+count+'">'+
'<img src="<%=basePath%>/hncmcc_web/images/req/btn/upload_file.gif" '+
'onClick = "reqUploadAtt(\'req_analyseReportAttachName'+count+'\',\'req_analyseReportAttachPath'+count+'\',\'analyseReportAttachPath'+count+'_span_id\');"'+ 
'style="cursor:hand;"/>'+
' <img src="<%=basePath%>/hncmcc_web/images/req/btn/del_file.gif" '+
'onClick="reqDeleteAtt(\'req_analyseReportAttachName'+count+'\',\'req_analyseReportAttachPath'+count+'\',\'analyseReportAttachPath'+count+'_span_id\')" style="cursor:hand;"/>'+
'</div>'+
'</td></tr></table>';
}else{
             obj.cells[j].innerHTML=tb.rows[i].cells[j].innerHTML;
}
            
            var textarea=obj.cells[j].getElementsByTagName("textarea");//设置文本域的id和name属性
            for(var k=0;k<textarea.length;k++){
                textarea[k].setAttribute("id",textarea[k].getAttribute("id")+Math.floor(obj.rowIndex/4));
                textarea[k].setAttribute("name",textarea[k].getAttribute("name")+Math.floor(obj.rowIndex/4));
            }
            obj.cells[j].setAttribute("width",tb.rows[i].cells[j].getAttribute("width"));
            if(tb.rows[i].cells[j].getAttribute("bgcolor")==""||tb.rows[i].cells[j].getAttribute("bgcolor")==null){
            tempTab.style.backgroundColor ="#ffffff";
            }else{
             tempTab.style.backgroundColor = tb.rows[i].cells[j].getAttribute("bgcolor");
            }
            tempTab.className = tb.rows[i].cells[j].className;
            
            if(tb.rows[i].cells[j].getAttribute("rowSpan")>1)obj.cells[j].setAttribute("rowSpan",tb.rows[i].cells[j].getAttribute("rowSpan"));
            if(tb.rows[i].cells[j].getAttribute("colSpan")>1)obj.cells[j].setAttribute("colSpan",tb.rows[i].cells[j].getAttribute("colSpan"));
            if(tb.rows[i].cells[j].getAttribute("scope")!="")obj.cells[j].setAttribute("scope",tb.rows[i].cells[j].getAttribute("scope"));
        }
    }
     var path='<%=orgPath%>' ;
      if(path.indexOf("省公司")!=-1){
      path = path.substr(path.indexOf('/')+1,path.length);
var len = path.indexOf('/');
if(len!=-1){
document.getElementById("req_deptname"+count).add(new Option(path.substr(path.indexOf('/')+1,path.length),deptid+"@"+path.substr(path.indexOf('/')+1,path.length)));
path = path.substr(0,len);
}else{
document.getElementById("req_deptname"+count).add(new Option(path,deptid+"@"+path.substr(path.indexOf('/')+1,path.length)));
}
document.getElementById("req_orgname"+count).value=path;
      document.getElementById("req_org_id"+count).value =orgsid; 
     
     }else{
      var idarrs = new Array();
idarrs = arrs.split(",");
for(var i=0;i<idarrs.length;i++)
{
    var str = idarrs[i];
    if(str!=""){
    document.getElementById("req_deptname"+count).add(new Option(str.substring(str.indexOf('@')+1,str.length),str));
    }
}
     }
     //======================
}
添加没问题当把模板删除了之后就无法在添加了 谁有好点的办法？

Answer 2

没太看懂你的意思，删除模板后 reload一下呢？

Answer 3

你代码中的count++;没有定义
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript"> 
<!-- 
var textNumber = 1; 
function addTextBox(form, afterElement) { 
// Increment the textbox number 
textNumber++; 
// Create the label 
var label = document.createElement("label"); 
// Create the textbox 
var textField = document.createElement("input"); 
textField.setAttribute("type","text"); 
textField.setAttribute("name","txt"+textNumber); 
textField.setAttribute("id","txt"+textNumber); 
// Add the label's text 
label.appendChild(document.createTextNode("Text Box #"+textNumber+": ")); 
// Put the textbox inside 
label.appendChild(textField); 
// Add it all to the form 
form.insertBefore(label,afterElement); 
return false; 
} 
function removeTextBox(form) { 
if (textNumber > 1) { // If there's more than one text box 
    // Remove the last one added 
    form.removeChild(document.getElementById("txt"+textNumber).parentNode); 
    textNumber--; 
} 
} 
//--> 
</script>
<style type="text/css">
<!--
label {
display: block;
margin: .25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>
Text Box #1:
<input type="text" name="txt1" id="txt1" />
</label>
<p>
<input type="button" value="Add Textbox"
onclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Remove Textbox"
onclick="removeTextBox(this.form)" />
</p>
<p>
<input type="Submit" value="Submit" />
</p>
</form>
</body>
</html>

Answer 4

不是那个没定义 是在另外一个jsp定义的 呵呵 我自己解决了有点大意了 呵呵 

Answer 5

尝试用Jquery或者Extjs， 啥时候了， 还用这么写JS,
http://www.extjs.com/deploy/dev/docs/ 
看看 Ext.util.DomHelper 类。