见一个可以想要几行就几行的表格:
html代码:
<table cellpadding="0" width="100%" cellspacing="0">
<thead>
<tr>
<td class="td_border1" align="center">机头号</td>
<td class="td_text_border" align="center">存货型号</td>
<td class="td_border" align="center"> 存货代码</td>
<td class="td_border" align="center">外包装及机台新旧程度</td>
<td class="td_border" align="center">退回原因</td>
</tr>
</thead>
<tbody id="hbody">
<td class="td_border1" align="center">1:<input type="text" name="headCode1" id="headCode1" class="texts" style="width: 96;"></td>
<td class="td_border" align="center">
<input class="texts" type="text" readonly="readonly" style="width: 110;" name="stockType1" id="stockType1">
<input type="button" value="..." class="buttons" onclick="openStock(1);" />
</td>
<td class="td_border2" align="center">
<input class="texts" type="text" readonly="readonly" name="stockCode1" id="stockCode1" style="width: 100;">
<input type="hidden" name="stockId1" id="stockId1">
</td>
<td class="td_border" align="center"><input type="text" name="oldnewPercent1" id="oldnewPercent1" class="texts" style="width: 120;"></td>
<td class="td_border" align="center"><input type="text" name="backReason1" id="backReason1" class="texts" style="width: 200;"></td>
</tbody>
</table>
js代码:
function addhrows(){
var num=document.getElementById("backNumber").value;
var hbody=document.getElementById("hbody");
var nums = parseInt(num);
DWRUtil.removeAllRows("hbody");
for(var i=1;i<= nums ;i++){
var hrow=hbody.insertRow();
hrow.align="center";
var htdhc=hrow.insertCell();
var htdst=hrow.insertCell();
var htdsc=hrow.insertCell();
var htdonp=hrow.insertCell();
var htdbr=hrow.insertCell();
htdhc.className = "td_border1";
htdst.className = "td_border";
htdsc.className = "td_border2";
htdonp.className = "td_border";
htdbr.className = "td_border";
htdhc.innerHTML= i +":<input type='text' name='headCode"+ i +"' id='headCode"+ i +"' class='texts' style='width: 96;'>";
htdst.innerHTML="<input class='texts' type='text' readonly='readonly' style='width: 110;' name='stockType"+ i +"' id='stockType"+ i +"'><input type='button' value='...' class='buttons' onclick='openStock("+i+");' />";
htdsc.innerHTML="<input type='text' name='stockCode"+ i +"' id='stockCode"+ i +"' style='width: 100;' class='texts'><input type='hidden' name='stockId"+ i +"' id='stockId"+ i +"'>";
htdonp.innerHTML="<input type='text' name='oldnewPercent"+ i +"' id='oldnewPercent"+ i +"' style='width: 120;' class='texts'>";
htdbr.innerHTML="<input type='text' name='backReason"+ i +"' id='backReason"+ i +"' style='width: 200;' class='texts'>";
}
}
如上,提交虽然是动态生成的数据表格,但后台依然可以准确的获得每一行的数据。依次方法,动态生成任意形状的表格应不难实现。
html代码:
<table cellpadding="0" width="100%" cellspacing="0">
<thead>
<tr>
<td class="td_border1" align="center">机头号</td>
<td class="td_text_border" align="center">存货型号</td>
<td class="td_border" align="center"> 存货代码</td>
<td class="td_border" align="center">外包装及机台新旧程度</td>
<td class="td_border" align="center">退回原因</td>
</tr>
</thead>
<tbody id="hbody">
<td class="td_border1" align="center">1:<input type="text" name="headCode1" id="headCode1" class="texts" style="width: 96;"></td>
<td class="td_border" align="center">
<input class="texts" type="text" readonly="readonly" style="width: 110;" name="stockType1" id="stockType1">
<input type="button" value="..." class="buttons" onclick="openStock(1);" />
</td>
<td class="td_border2" align="center">
<input class="texts" type="text" readonly="readonly" name="stockCode1" id="stockCode1" style="width: 100;">
<input type="hidden" name="stockId1" id="stockId1">
</td>
<td class="td_border" align="center"><input type="text" name="oldnewPercent1" id="oldnewPercent1" class="texts" style="width: 120;"></td>
<td class="td_border" align="center"><input type="text" name="backReason1" id="backReason1" class="texts" style="width: 200;"></td>
</tbody>
</table>
js代码:
function addhrows(){
var num=document.getElementById("backNumber").value;
var hbody=document.getElementById("hbody");
var nums = parseInt(num);
DWRUtil.removeAllRows("hbody");
for(var i=1;i<= nums ;i++){
var hrow=hbody.insertRow();
hrow.align="center";
var htdhc=hrow.insertCell();
var htdst=hrow.insertCell();
var htdsc=hrow.insertCell();
var htdonp=hrow.insertCell();
var htdbr=hrow.insertCell();
htdhc.className = "td_border1";
htdst.className = "td_border";
htdsc.className = "td_border2";
htdonp.className = "td_border";
htdbr.className = "td_border";
htdhc.innerHTML= i +":<input type='text' name='headCode"+ i +"' id='headCode"+ i +"' class='texts' style='width: 96;'>";
htdst.innerHTML="<input class='texts' type='text' readonly='readonly' style='width: 110;' name='stockType"+ i +"' id='stockType"+ i +"'><input type='button' value='...' class='buttons' onclick='openStock("+i+");' />";
htdsc.innerHTML="<input type='text' name='stockCode"+ i +"' id='stockCode"+ i +"' style='width: 100;' class='texts'><input type='hidden' name='stockId"+ i +"' id='stockId"+ i +"'>";
htdonp.innerHTML="<input type='text' name='oldnewPercent"+ i +"' id='oldnewPercent"+ i +"' style='width: 120;' class='texts'>";
htdbr.innerHTML="<input type='text' name='backReason"+ i +"' id='backReason"+ i +"' style='width: 200;' class='texts'>";
}
}
如上,提交虽然是动态生成的数据表格,但后台依然可以准确的获得每一行的数据。依次方法,动态生成任意形状的表格应不难实现。