<title>报价文件上传</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="height: 538px">
<table align="center" border="0" cellpadding="0" cellspacing="1" class="table_outer"
width="99%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="DataTable"
width="100%">
<tr>
<td align="right" class="RowHeading" style="height: 17px; width: 100px;">
部件描述</td>
<td class="RowWhite" colspan="5" style="height: 17px; width: 1053px;">
<table cellspacing="0" width="100%">
<tr>
<td bgcolor="#99cc99" style="width: 715px; height: 14px;">
1.Rapid Tooling Cost</td>
</tr>
<tr>
<td style="width: 715px">
<table id = "tabItem" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 3px">
<table cellspacing="0" width="100%">
<tr>
<td height="10" bgcolor="#f0f8ff">
ItemNo.</td>
<td style="width: 257px;" height="10" bgcolor="#f0f8ff" bordercolor="#99cc99">
IGES/STEP/STL file name
</td>
<td rowspan="2" bgcolor="#f0f8ff" bordercolor="#99cc99" style="width: 100%">
<table id="tabInfo">
</table>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f0f8ff" bordercolor="#99cc99" style="height: 26px">
1</td>
<td valign="top" bgcolor="#f0f8ff" bordercolor="#99cc99" style="width: 257px; height: 26px;">
<asp:TextBox ID="TextBox4" runat="server" CssClass="Input_Text_160"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" style="height: 15px" bgcolor="#f0f8ff" bordercolor="#99cc99">
</td>
<td rowspan="1" bgcolor="#f0f8ff" bordercolor="#99cc99" style="width: 100%">
<a id="add" href="javascript:;" name="add" onclick="addRow();" style="font-size: 9pt;
font-family: 宋体" title="添中一条描述">添加描述</a>
</td>
</tr>
<tr>
<td style="height: 247px" colspan="2">
<div id="pic" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width: 400px; height: 300px;">
</div>
请选择要上传的图片:<input type="file" onchange="javascript:Preview(this);" />
</td>
<td style="width: 100%; height: 247px;" valign="top">
<asp:TextBox ID="TextBox5" runat="server" CssClass="Input_Text_300" Height="216px"
TextMode="MultiLine">Size:
Max X:
Max Y:
Max Z:Volume:Material:
Polyurethane resin, xxxx performance.</asp:TextBox></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 715px; height: 15px;" bgcolor="#99cc99">
2.Logistic Fee (Delivered by FedEx Express Airway)</td>
</tr>
<tr>
<td style="width: 715px">
<table>
<tr>
<td style="width: 61px; height: 14px;">
ItemNo</td>
<td style="width: 100%; height: 14px;">
IGES/STEP/STL file name</td>
<td style="width: 212408px; height: 14px;">
Gross volume</td>
<td style="width: 212408px; height: 14px;">
Destination</td>
<td style="width: 212408px; height: 14px;">
Qty</td>
<td style="width: 212408px; height: 14px;">
Total volume</td>
</tr>
<tr>
<td style="width: 61px">
</td>
<td style="width: 100%">
<asp:TextBox ID="TextBox1" runat="server" CssClass="Input_Text_160"></asp:TextBox></td>
<td style="width: 212408px">
<asp:TextBox ID="TextBox3" runat="server" CssClass="Input_Text_80"></asp:TextBox></td>
<td style="width: 212408px">
<asp:TextBox ID="TextBox9" runat="server" CssClass="Input_Text_80"></asp:TextBox></td>
<td style="width: 212408px">
<asp:TextBox ID="TextBox6" runat="server" CssClass="Input_Text_80"></asp:TextBox></td>
<td style="width: 212408px">
<asp:TextBox ID="TextBox7" runat="server" CssClass="Input_Text_80"></asp:TextBox></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 715px">
</td>
</tr>
<tr>
<td style="width: 715px; height: 4px;">
</td>
</tr>
<tr>
<td style="width: 715px; height: 8px;">
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
<table style="width: 100%; background-color: #ccccff">
<tr>
<td style="width: 50%; height: 21px">
<input id="btnAddItem" type="button" value="Add Item" onclick="addItem();" /></td>
<td style="width: auto; height: 21px">
<asp:Button ID="btnUpload" runat="server" AccessKey="U" CssClass="Button" OnClick="btnUpload_Click"
Text="上传(U)" />
<asp:Button ID="btnCancel" runat="server" AccessKey="C" CssClass="Button" Text="取消(C)" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<asp:HiddenField ID="hdn" runat="server" />
</div>
</form>
</body>
</html>
{
var row = tabItem.insertRow(-1);
cell0 = row.insertCell(0); cell0.innerHTML = "<table cellspacing='0' width='100%'>"+
"<tr> <td height='10' bgcolor='#f0f8ff'> ItemNo.</td> <td style='width: 257px;' height='10' bgcolor='#f0f8ff' bordercolor='#99cc99'>"+
"IGES/STEP/STL file name </td> <td rowspan='2' bgcolor='#f0f8ff' bordercolor='#99cc99' style='width: 100%'> <table id='tabInfo'> </table> </td> </tr>"+
"<tr> <td valign='top' bgcolor='#f0f8ff' bordercolor='#99cc99' style='height: 26px'> 1</td> <td valign='top' bgcolor='#f0f8ff' bordercolor='#99cc99' style='width: 257px; height: 26px;'>"+
"<input id='Text1' type='text' /></asp:TextBox></td></tr><tr><td colspan='2' style='height: 15px' bgcolor='#f0f8ff' bordercolor='#99cc99'></td>"+
"<td rowspan='1' bgcolor='#f0f8ff' bordercolor='#99cc99' style='width: 100%'><a id='add' href='javascript:;' name='add' onclick='addRow();' style='font-size: 9pt;"+
"font-family: 宋体' title='添中一条描述'>添加描述</a> </td> </tr> <tr> <td style='height: 247px' colspan='2'> <div id='pic' style='filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"+
"width: 400px; height: 300px;'></div> 请选择要上传的图片:<input type='file' onchange='javascript:Preview(this);' /> </td> <td style='width: 100%; height: 247px;' valign='top'>"+
" <textarea name='TextBox5' rows='2' cols='20' id='TextBox5' class='Input_Text_300' style='height:216px;'>Size:\nMax X:\nMax Y:\nMax Z:\n\nVolume:\n\n\nMaterial:\nPolyurethane resin, xxxx performance.</textarea></td></tr></table>";
}
<head runat="server">
<link href="../css/crm.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
var i=1;
function sum1(){
var obj = event.srcElement;
var num1 = parseFloat(obj.value);
var num2 = parseFloat(obj.parentNode.nextSibling.childNodes[1].value);
if(num1 != "" || num2 != ""){
obj.parentNode.nextSibling.nextSibling.childNodes[1].value = num1*num2;
}
}
function sum2(){
var obj = event.srcElement;
var num1 = parseFloat(obj.value);
var num2 = parseFloat(obj.parentNode.previousSibling.childNodes[1].value); if(num1 != "" || num2 != ""){
obj.parentNode.nextSibling.childNodes[1].value = num1*num2;
}
} function addRow(id,i)
{
document.getElementById(id).innerText = "继续添加描述";
var row = document.getElementById('tabInfo'+i).insertRow(-1);
cell0 = row.insertCell(0);
cell0.innerHTML = "材料/方法<input id='datum' class=Input_Text_120 type=text />";
cell1 = row.insertCell(1);
cell1.innerHTML = "单价<input id='price' class=Input_Text_120 type=text />";
cell1.childNodes[1].attachEvent("onblur",sum1);
cell2 = row.insertCell(2);
cell2.innerHTML = "数量<input id='num' class=Input_Text_120 type=text />";
cell2.childNodes[1].attachEvent("onblur",sum2);
cell3 = row.insertCell(3);
cell3.innerHTML = "合计<input id='sum' class=Input_Text_120 type=text />";
cell4 = row.insertCell(4);
cell4.innerHTML = "<A id='del' style=font-family:宋体;font-size:9pt; title='删除本行' onclick='delRow(this.parentElement.parentElement.rowIndex,"+id+","+i+");'href='#' name='del'>删除</A>";
alert(cell4.innerHTML)
}
function delRow(index,oid,j)
{
document.getElementById('tabInfo'+j).deleteRow(index);
document.getElementById('tabInfo'+j).rows.length > 0?document.getElementById(oid).innerText = "继续添加描述":document.getElementById(oid).innerText = "添加描述";
} function total()
{
var oDatum = document.getElementsByName("datum");
var oPrice = document.getElementsByName("price");
var oNum = document.getElementsByName("num");
var oSum = document.getElementsByName("sum");
var sDatum = "";
var sPrice = "";
var sNum = "";
var sSum = ""; for(var i = 0; i < oDatum.length; i++)
{
if(i == 0)
{
sDatum = oDatum[i].value;
sPrice = oPrice[i].value;
sNum = oNum[i].value;
sSum = oSum[i].value;
}
else
{
sDatum += "," + oDatum[i].value;
sPrice += "," + oPrice[i].value;
sNum += "," + oNum[i].value;
sSum += "," + oSum[i].value;
}
}
//alert(sDatum + "|" + sPrice + "|" + sNum + "|" + sSum); document.getElementById('hdn').value = sDatum + "|" + sPrice + "|" + sNum + "|" + sSum;
}
function Preview(imgFile)
{
document.getElementById("pic").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
}
function addItem()
{i=i+1;
var row = tabItem.insertRow(-1);
var previous_row = tabItem.children.item(0).children.item(0);
cell0 = row.insertCell(0);
//cell0.innerHTML = previous_row.children.item(0).innerHTML;
var str= "<table cellspacing='0' width='100%'>"+
"<tr> <td height='10' bgcolor='#f0f8ff'> ItemNo.</td> <td style='width: 257px;' height='10' bgcolor='#f0f8ff' bordercolor='#99cc99'>"
str=str+"IGES/STEP/STL file name </td> <td rowspan='2' bgcolor='#f0f8ff' bordercolor='#99cc99' style='width: 100%'> <table id='tabInfo"+i+"'> </table> </td> </tr>"
str=str+"<tr> <td valign='top' bgcolor='#f0f8ff' bordercolor='#99cc99' style='height: 26px'> 1</td> <td valign='top' bgcolor='#f0f8ff' bordercolor='#99cc99' style='width: 257px; height: 26px;'>"
str=str+"<input id='Text1' type='text' /></asp:TextBox></td></tr><tr><td colspan='2' style='height: 15px' bgcolor='#f0f8ff' bordercolor='#99cc99'></td>"
str=str+"<td rowspan='1' bgcolor='#f0f8ff' bordercolor='#99cc99' style='width: 100%'><a id='add"+i+"'"
str=str+" name='add"+i+"' onclick='addRow(this.id,"+i+");' style='font-size: 9pt;"
str=str+ "font-family: 宋体' title='添中一条描述'>添加描述</a> </td> </tr> <tr> <td style='height: 247px' colspan='2'> <div id='pic' style='filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"
str=str+ "width: 400px; height: 300px;'></div> 请选择要上传的图片:<input type='file' onchange='javascript:Preview(this);' /> </td> <td style='width: 100%; height: 247px;' valign='top'>"
str=str+" <textarea name='TextBox5' rows='2' cols='20' id='TextBox5' class='Input_Text_300' style='height:216px;'>Size:\nMax X:\nMax Y:\nMax Z:\n\nVolume:\n\n\nMaterial:\nPolyurethane resin, xxxx performance.</textarea></td></tr></table>";
cell0.innerHTML=str
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="height: 538px">
<table align="center" border="0" cellpadding="0" cellspacing="1" class="table_outer"
width="99%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="DataTable"
width="100%">
<tr>
<td align="right" class="RowHeading" style="height: 17px; width: 100px;">
部件描述</td>
<td class="RowWhite" colspan="5" style="height: 17px; width: 1053px;">
<table cellspacing="0" width="100%">
<tr>
<td bgcolor="#99cc99" style="width: 715px; height: 14px;">
1.Rapid Tooling Cost</td>
</tr>
<tr>
<td style="width: 715px">
<table id = "tabItem" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 3px">
<table cellspacing="0" width="100%">
<tr>
<td height="10" bgcolor="#f0f8ff">
ItemNo.</td>
<td style="width: 257px;" height="10" bgcolor="#f0f8ff" bordercolor="#99cc99">
IGES/STEP/STL file name
</td>
<td rowspan="2" bgcolor="#f0f8ff" bordercolor="#99cc99" style="width: 100%">
<table id="tabInfo1">
</table>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f0f8ff" bordercolor="#99cc99" style="height: 26px">
1</td>
<td valign="top" bgcolor="#f0f8ff" bordercolor="#99cc99" style="width: 257px; height: 26px;">
<asp:TextBox ID="TextBox4" runat="server" CssClass="Input_Text_160"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" style="height: 15px" bgcolor="#f0f8ff" bordercolor="#99cc99">
</td>
<td rowspan="1" bgcolor="#f0f8ff" bordercolor="#99cc99" style="width: 100%">
<a id="add1" href="javascript:;" name="add1" onclick="addRow(this.id,1);" style="font-size: 9pt;
font-family: 宋体" title="添中一条描述">添加描述</a>
</td>
</tr>
<tr>
<td style="height: 247px" colspan="2">
<div id="pic" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width: 400px; height: 300px;">
</div>
请选择要上传的图片:<input type="file" onchange="javascript:Preview(this);" />
</td>
<td style="width: 100%; height: 247px;" valign="top">
<asp:TextBox ID="TextBox5" runat="server" CssClass="Input_Text_300" Height="216px"
TextMode="MultiLine">Size:
Max X:
Max Y:
Max Z:Volume:Material:
Polyurethane resin, xxxx performance.</asp:TextBox></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 715px; height: 15px;" bgcolor="#99cc99">
2.Logistic Fee (Delivered by FedEx Express Airway)</td>
</tr>
<tr>
<td style="width: 715px">
<table>
<tr>
<td style="width: 61px; height: 14px;">
ItemNo</td>
<td style="width: 100%; height: 14px;">
IGES/STEP/STL file name</td>
<td style="width: 212408px; height: 14px;">
Gross volume</td>
<td style="width: 212408px; height: 14px;">
Destination</td>
<td style="width: 212408px; height: 14px;">
Qty</td>
<td style="width: 212408px; height: 14px;">
Total volume</td>
</tr>
<tr>
<td style="width: 61px">
</td>
<td style="width: 100%">
<asp:TextBox ID="TextBox1" runat="server" CssClass="Input_Text_160"></asp:TextBox></td>
<td style="width: 212408px">
<asp:TextBox ID="TextBox3" runat="server" CssClass="Input_Text_80"></asp:TextBox></td>
<td style="width: 212408px">
<asp:TextBox ID="TextBox9" runat="server" CssClass="Input_Text_80"></asp:TextBox></td>
<td style="width: 212408px">
<asp:TextBox ID="TextBox6" runat="server" CssClass="Input_Text_80"></asp:TextBox></td>
<td style="width: 212408px">
<asp:TextBox ID="TextBox7" runat="server" CssClass="Input_Text_80"></asp:TextBox></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 715px">
</td>
</tr>
<tr>
<td style="width: 715px; height: 4px;">
</td>
</tr>
<tr>
<td style="width: 715px; height: 8px;">
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
<table style="width: 100%; background-color: #ccccff">
<tr>
<td style="width: 50%; height: 21px">
<input id="btnAddItem" type="button" value="Add Item" onclick="addItem();" /></td>
<td style="width: auto; height: 21px">
<asp:Button ID="btnUpload" runat="server" AccessKey="U" CssClass="Button" OnClick="btnUpload_Click"
Text="上传(U)" />
<asp:Button ID="btnCancel" runat="server" AccessKey="C" CssClass="Button" Text="取消(C)" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<asp:HiddenField ID="hdn" runat="server" />
</div>
</form>
</body>
</html>
function addRow(obj)
{
// td tr tbody
var tabInfo=obj.parentNode.parentNode.parentNode.rows[0].cells[2].getElementsByTagName("table")[0];//这样来获取描述的table obj.innerText = "继续添加描述";
var row = tabInfo.insertRow(-1);
cell0 = row.insertCell(0);
cell0.innerHTML = "材料/方法<input id='datum' class=Input_Text_120 type=text />";
cell1 = row.insertCell(1);
cell1.innerHTML = "单价<input id='price' class=Input_Text_120 type=text />";
cell1.childNodes[1].attachEvent("onblur",sum1);
cell2 = row.insertCell(2);
cell2.innerHTML = "数量<input id='num' class=Input_Text_120 type=text />";
cell2.childNodes[1].attachEvent("onblur",sum2);
cell3 = row.insertCell(3);
cell3.innerHTML = "合计<input id='sum' class=Input_Text_120 type=text />";
cell4 = row.insertCell(4);
//注意这里把this作为delRow的参数===========
cell4.innerHTML = "<A id='del' style=font-family:宋体;font-size:9pt; title='删除本行' onclick='delRow(this);'href='javascript:;' name='del'>删除</A>";
}
function delRow(obj)
{
var tabInfo=obj.parentNode.parentNode.parentNode;//在ie时此为tbody,ie自动加上的
tabInfo.removeChild(obj.parentNode.parentNode);
if(tabInfo.rows.length < 1)
// table td tr tbody
tabInfo.parentNode.parentNode.parentNode.parentNode.rows[2].cells[1].getElementsByTagName('a')[0].innerText = "添加描述"; }
function Preview(imgFile)//注意使用的是父子关系来操作
{
imgFile.parentNode.getElementsByTagName("div")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
// document.getElementById("pic").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
} //这里不需要改变了
function addItem()
{
var row = tabItem.insertRow(-1);
var previous_row = tabItem.children.item(0).children.item(0);
cell0 = row.insertCell(0);
cell0.innerHTML = previous_row.children.item(0).innerHTML; }改动过的html <td rowspan="1" bgcolor="#f0f8ff" bordercolor="#99cc99" style="width: 100%">
<!-----------将this作为addRow的参数------------->
<a id="add" href="javascript:;" name="add" onclick="addRow(this);" style="font-size: 9pt;
font-family: 宋体" title="添中一条描述">添加描述</a>
</td>
{i=i+1;
var row = tabItem.insertRow(-1);
var previous_row = tabItem.children.item(0).children.item(0);
cell0 = row.insertCell(0);
//cell0.innerHTML = previous_row.children.item(0).innerHTML;
var str= "<table cellspacing='0' width='100%'>"+
"<tr> <td height='10' bgcolor='#f0f8ff'> ItemNo."+i+"</td> <td style='width: 257px;' height='10' bgcolor='#f0f8ff' bordercolor='#99cc99'>"
str=str+"IGES/STEP/STL file name </td> <td rowspan='2' bgcolor='#f0f8ff' bordercolor='#99cc99' style='width: 100%'> <table id='tabInfo"+i+"'> </table> </td> </tr>"
str=str+"<tr> <td valign='top' bgcolor='#f0f8ff' bordercolor='#99cc99' style='height: 26px'> 1</td> <td valign='top' bgcolor='#f0f8ff' bordercolor='#99cc99' style='width: 257px; height: 26px;'>"
str=str+"<input id='Text"+i+"' type='text' /></asp:TextBox></td></tr><tr><td colspan='2' style='height: 15px' bgcolor='#f0f8ff' bordercolor='#99cc99'></td>"
str=str+"<td rowspan='1' bgcolor='#f0f8ff' bordercolor='#99cc99' style='width: 100%'><a id='add"+i+"'"
str=str+" name='add"+i+"' onclick='addRow(this.id,"+i+");' style='font-size: 9pt;"
str=str+ "font-family: 宋体' title='添中一条描述'>添加描述</a> </td> </tr> <tr> <td style='height: 247px' colspan='2'> <div id='pic' style='filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"
str=str+ "width: 400px; height: 300px;'></div> 请选择要上传的图片:<input type='file' onchange='javascript:Preview(this);' /> </td> <td style='width: 100%; height: 247px;' valign='top'>"
str=str+" <textarea name='TextBox5' rows='2' cols='20' id='TextBox5' class='Input_Text_300' style='height:216px;'>Size:\nMax X:\nMax Y:\nMax Z:\n\nVolume:\n\n\nMaterial:\nPolyurethane resin, xxxx performance.</textarea></td></tr></table>";
cell0.innerHTML=str
}
修改下这部分
chinmo,最后点“上传”按钮时,我如何区分出各个Item中的元素呢?最后只要可以生成以下字符就可以
[item1|pic=xxx|filename=xxx|desc=a1+a2+a3+a4;b1+b2+b3+b4][item2|pic=xxx|filename=xxx|desc=a1+a2+a3+a4;b1+b2+b3+b4]
....
[itemX|pic=xxx|filename=xxx|desc=a1+a2+a3+a4;b1+b2+b3+b4]其中的a、b分别为为item添加的描述。
当然你这里最好都加下
cell0.innerHTML = "材料/方法<input id='datum"+j+"' class=Input_Text_120 type=text />"
这样就可以区分
其他的可以类推
当然你以上改了的话
function total()
{
var oDatum = document.getElementsByName("datum");
var oPrice = document.getElementsByName("price");
var oNum = document.getElementsByName("num");
var oSum = document.getElementsByName("sum");
这个就要改了
使用一个参数了
这个参数怎么加你也知道了吧
cell0.innerHTML = "材料/方法<input id='datum"+j+"' name='datum"+j+"' class=Input_Text_120 type=text />"哦了,对了,你加的cell0.innerHTML = "材料/方法<input id='datum' class=Input_Text_120 type=text />"
这些里都没有name,而你使用getElementsByName,所有就会有错误了
最好这样
这个肯定得用textarea代替 服务器端取值的时候需要注意
想帮你解决的话就把需求说清楚 然后封装一个类
在item列表后面,有一个item名称的列表。即每添加一个item,在这个表格里添加一行,每行的第二项就是item里填写的fila name文本。
最后,可以把这个页面的信息用一个类来封装起来。