JS动态表格新增
来源：互联网 发布：java调用http接口json 编辑：程序博客网 时间：2024/06/06 05:26
/**
* 新增行
*/
var n = 0;
function addSubject(){
var objTable=document.getElementById("tab"); //获得table的对象
tr=objTable.insertRow(); //添加行
tr.setAttribute('id','tr'+n);
tr.setAttribute('onMouseOut','mouseOut(this)');
tr.setAttribute('onMouseOver','mouseOver(this)');
td1=tr.insertCell(); //添加单元格
td1.style.cssText='nowrap="nowrap" width="5%" align="center"'; //设置单元格的样式
td1.align='center';
td1.innerHTML='<input type="hidden" name="addRow"><div class="www_zzjs_net" style="text-align:center"><a href="#" id="a'+n+'" class="ovalbutton_13" onClick="deleteRow(this);" hidefocus="true"><span name="delete" class="BUTTON">删除</span></a></div>';
td2=tr.insertCell(); //添加单元格
td2.style.cssText='nowrap="nowrap" width="18%"'; //设置单元格的样式
td2.innerHTML='<input type="text" name="deal" id="deal'+n+'">'; //添加td中的内容
td3=tr.insertCell(); //添加单元格
td3.style.cssText='nowrap="nowrap" width="22%"'; //设置单元格的样式
td3.innerHTML='<INPUT Type="Text" Name="Date" Id="Date'+n+'" Style="width:150" Class="dateText" Size="10" MaxLength="10" onKeyDown="Tab();" onKeyPress="pressNumberChar();"><A onClick="event.cancelBubble=true;" Href="JavaScript:showCalendar(\'Date'+n+'\',\'Date'+n+'_img\');" Target=_self TabIndex="-1"><IMG Id="Date'+n+'_img" Height="22" Src="img/sel_date.gif" Width=25 Align="absMiddle" border="0"></A>'; //添加td中的内容
td4=tr.insertCell(); //添加单元格
td4.style.cssText='nowrap="nowrap" width="55%"'; //设置单元格的样式
td4.innerHTML='<input name="detail" id="detail'+n+'"type="text"style=" width: 100%;">'; //添加td中的内容
n++;
}
function deleteRow(r){
if(!confirm("是否删除此行")){
return;
}
var index = r.parentNode.parentNode.parentNode.rowIndex;
var objTable=document.getElementById("tab");
objTable.deleteRow(index);
}
<body>
<table id="tab" name="tab" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" class="table">
<% //取查询风险报告
List<Map> list = (List<Map>)resp.get("riskReportingList");
if(list.size()>0){
for(int i = 0;i<list.size();i++){
Map reporting = (Map)list.get(i);
Integer id = CastUtil.toInteger(reporting.get("id"));
String codeNum = CastUtil.toString(reporting.get("codeNum"), "");
String describe = CastUtil.toString(reporting.get("describe"), "");
Date date = CastUtil.toDate(reporting.get("reportingDate"));
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
String d = format.format(date);
String state = CastUtil.toString(reporting.get("state"), "");
%>
<tr onMouseOut="mouseOut(this)" onMouseOver="mouseOver(this)">
<td nowrap="nowrap" align="center"><INPUT Type="CheckBox" style="vertical-align:middle" onpropertychange="changeRowColor(this);changeStat(this);" Style="border:none" Name="maId" Value="0" onKeyDown="Tab();" ></td>
<td nowrap="nowrap"><input type="hidden" name="cId"value="<%=id %>"><input type="text" value="<%=codeNum %>" id="<%="codeNum"+id %>" name="codeNum"></td>
<td nowrap="nowrap"><INPUT value="<%=d %>" Type="Text" Name=<%="startDate"+id %> Id=<%="startDate"+id %> Style="width:150" Class="dateText" Size="10" MaxLength="10" onKeyDown="Tab();" onKeyPress="pressNumberChar();"><A onClick="event.cancelBubble=true;" Href="JavaScript:showCalendar('<%="startDate"+id %>','<%="startDate"+id %>_img');" Target=_self TabIndex="-1"><IMG Id="<%="startDate"+id %>_img" Height="22" Src="img/sel_date.gif" Width=25 Align="absMiddle" border="0"></A></td>
<td nowrap="nowrap"><input id=<%="describe"+id %> name="describe" type="text" style=" width: 100%;" value="<%=describe %>" /></td>
<td nowrap="nowrap"><input type="hidden" id="sta"name="sta"value="<%=state %>"><%=state %></td>
<%}} %>
</body>
