动态操作表格
最近做了一个项目，涉及到了采购这块，对每一笔采购里面，都需要详细录入采购的具体物品，包括名称，数量，单价，总结和重量，如图：
因为物品不固定，所以需要动态的添加，这个功能以前做过，采用是jquery的一种方式，下面介绍一种采用纯javascript，对表格的操作
首先在页面中加入javascript代码块
<script type="text/javascript">
function addRow(tabObj,colNum,sorPos,targPos){
var nTR = tabObj.insertRow(tabObj.rows.length-targPos);
var TRs = tabObj.getElementsByTagName('TR');
var sorTR = TRs[sorPos];
var TDs = sorTR.getElementsByTagName('TD');
if(colNum==0 || colNum==undefined || colNum==isNaN){
colNum=tabObj.rows[0].cells.length;
}
var ntd = new Array();
for(var i=0; i< colNum; i++){
ntd[i] = nTR.insertCell();
ntd[i].id = TDs[0].id;
ntd[i].innerHTML = TDs[i].innerHTML;
}
}
function deleteRow(tabObj,targPos,btnObj){ //Remove table row
for(var i =0; i<tabObj.rows.length;i++){
if(tabObj.getElementsByTagName('img')[i]==btnObj){
tabObj.deleteRow(i+targPos);
//alert(i+targPos);
}
}
}
//根据单价和数量，算出总价
function Comp(tabObj,targPos,btnObj){
for(var i =0; i<(tabObj.rows.length-1)*5;i++){
if(tabObj.getElementsByTagName('input')[i]==btnObj){
//alert(i.toString());
count=parseInt(tabObj.rows[(i-4)/5+targPos].cells[1].childNodes[0].value);
price=tabObj.rows[(i-4)/5+targPos].cells[2].childNodes[1].value;
tabObj.rows[(i-4)/5+targPos].cells[3].childNodes[1].value=parseFloat(count*price);
//total=total+parseFloat(count*price);
}
}
document.getElementById("txtMoney").value="0";
total=parseFloat(document.getElementById("txtMoney").value);
for(var j =0; j<tabObj.rows.length;j++)
{
total+=parseFloat(tabObj.rows[j+targPos].cells[3].childNodes[1].value);
document.getElementById("txtMoney").value=total.toString();
}
}
</script>
其次是html的代码
<tr>
<td width="20%">
采购明细：
</td>
<td align="left" style="padding-left: 0px">
<table id="tabUserInfo" width="780" border="0" align="left" style="margin-top: 0px;
text-align: center">
<tr>
<th width="20%" style="font-weight: bold">
名称
</th>
<th style="font-weight: bold">
数量
</th>
<th style="font-weight: bold">
单价
</th>
<th style="font-weight: bold">
价格
</th>
<th style="font-weight: bold">
类别
</th>
<th style="font-weight: bold">
重量
</th>
<th>
删除
</th>
</tr>
<tr style="display: none">
<td width="20%">
<input id="proName" name="proName" />
</td>
<td style="border-bottom: 1px solid;">
<input id="proCount" name="proCount" onblur="Comp(document.all.tabUserInfo,2,this)"
name="proCount" style="width: 60px" value="0" onkeyup="value=value.replace(/[^\d]/g,'')" />
</td>
<td>
￥<input type="text" id="proPrice" name="proPrice" onkeyup="value=value.replace(/[^\d|.]/g,'')"
onblur="Comp(document.all.tabUserInfo,2,this)" name="proPrice" style="width: 60px"
value="0" />
</td>
<td>
￥
<input type="text" name="proTotal" style="width: 60px" value="0" readonly />
<%--<span name="proTotal">0</span>--%>
<%--<img alt="Delete" src="../images/detete.jpg" onClick="Comp(document.all.tabUserInfo,2,this)" width="20" height="20" style="cursor:pointer" />--%>
</td>
<td>
<select name="proType">
<%if (Request.QueryString["fig"] != null)
{
int fig = Convert.ToInt32(Request.QueryString["fig"].ToString());
if (fig == 0)
{
%>
<option value="蔬菜">蔬菜</option>
<option value="豆制品">豆制品</option>
<option value="肉禽蛋类">肉禽蛋类</option>
<option value="调料类">调料类</option>
<% }
else
{ %>
<option value="桌类">桌类</option>
<option value="床类">床类</option>
<option value="椅凳类">椅凳类</option>
<option value="沙发类">沙发类</option>
<%}
}%>
</select>
</td>
<td>
<input id="proWeight" name="proWeight" style="width: 60px" />
</td>
<td style="border-bottom: 1px solid; border-right: 0px; border-top: 0px" align="left">
<img alt="Delete" onclick="deleteRow(document.all.tabUserInfo,2,this)" src="../images/detete.jpg"
width="20" height="20" title="删除行" style="cursor: pointer" />
</td>
</tr>
<tr>
<td width="20%">
<input id="proName1" name="proName" />
</td>
<td>
<input id="proCount1" name="proCount" style="width: 60px" onkeyup="value=value.replace(/[^\d]/g,'')"
value="0" onblur="Comp(document.all.tabUserInfo,2,this)" />
</td>
<td>
￥<input id="proPrice1" name="proPrice" style="width: 60px" value="0" onblur="Comp(document.all.tabUserInfo,2,this)"
onkeyup="value=value.replace(/[^\d|.]/g,'')" />
</td>
<td>
￥
<input type="text" name="proTotal" style="width: 60px" value="0" readonly />
</td>
<td>
<select name="proType">
<%if (Request.QueryString["fig"] != null)
{
int fig = Convert.ToInt32(Request.QueryString["fig"].ToString());
if (fig == 0)
{
%>
<option>蔬菜</option>
<option>豆制品</option>
<option>肉禽蛋类</option>
<option>调料类</option>
<% }
else
{ %>
<option>桌类</option>
<option>床类</option>
<option>椅凳类</option>
<option>沙发类</option>
<%}
}%>
</select>
</td>
<td>
<input id="proWeight1" name="proWeight" style="width: 60px" />
</td>
<td>
 
</td>
</tr>
<tr>
<td style="border-bottom: 0px; border-right: 0px; border-top: 0px" align="left" colspan="6">
<img src="../images/tj1.jpg" onclick="addRow(document.all.tabUserInfo,null,1,1)"
style="cursor: pointer" title="添加行" alt="添加行" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="20%">
总金额：
</td>
<td align="left" style="padding-left: 10px">
<asp:TextBox ID="txtMoney" ContentEditable="false" runat="server" onkeyup="if(isNaN(value))execCommand('undo');"
Width="200px" class="cx_box1" Text="0"></asp:TextBox><span style="color: Red"> *</span>
</td>
</tr>
上面这块有几点需要说一下
1、默认显示一行，这个需要另外写出来，为了方便后期的读取，我们把显示的这一行放在后面
2、这里面涉及到了计算问题，需要获得当前点击行的相关值，可以看一下例子
下面就是通过后他代码操作这些数据了
string productName = Request["proName"].ToString(); //采购产品名称 string[] productNameList = productName.Split(','); string productCount = Request["proCount"].ToString(); //采购产品数量 string[] productCountList = productCount.Split(','); string productPrice = Request["proPrice"].ToString(); //采购产品单价 string[] productPriceList = productPrice.Split(','); string productTotal = Request["proTotal"].ToString(); //采购产品总价 string[] productTotalList = productTotal.Split(','); string protype = Request["proType"].ToString(); //采购产品分类 string[] productTypeList = protype.Split(','); string proWeight = Request["proWeight"].ToString(); string[] proweightList = proWeight.Split(','); for (int i = 1; i < productNameList.Length; i++) { TPurchase purchase = new TPurchase(); purchase.ProName= productNameList[i].ToString(); purchase.ProCount = productCountList[i].ToString() == "" ? 0 : Convert.ToInt32(productCountList[i].ToString()); purchase.ProPrice = productPrice[i].ToString() == "" ? 0 : Convert.ToDecimal(productPriceList[i].ToString()); purchase.ProTotal = Convert.ToDecimal(productTotalList[i].ToString()); purchase.ProType = productTypeList[i].ToString(); purchase.ProWeight = proweightList[i].ToString(); purchase.Fid = Convert.ToInt32(result); Purchasebll.Add(purchase); }
然后就可以把数据添加到数据库中了，这一点需要说明的是，这个详细的采购物品清单最好单独设置一个表，这样方便操作
多思考，多创新，才是正道！
