大家好：
我做
类似Excel一样的表格
当在编号栏中输入编号时，无刷新从服务器中读取该编号的产品
并将值放到随后的相应的栏位
如果那个栏位的值是多个的要求显示下拉列表选择最后用将值用做成XML向服务器提交。。大家帮帮忙。
有相关的代码的都可以来UP的有分
分不够，在开贴送分，解决了后开源大家共享
我做
类似Excel一样的表格
当在编号栏中输入编号时，无刷新从服务器中读取该编号的产品
并将值放到随后的相应的栏位
如果那个栏位的值是多个的要求显示下拉列表选择最后用将值用做成XML向服务器提交。。大家帮帮忙。
有相关的代码的都可以来UP的有分
分不够，在开贴送分，解决了后开源大家共享
我也刚学共同学习:)
<HEAD><link rel="stylesheet" href="ClientTable.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>Document Title</TITLE>
</HEAD>
<BODY bgcolor="#F9F8F5" text="#000000"><form name="form1" method="post"><input type="hidden" id="oldValue">
<DIV id="TableContainer">
<TABLE width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" id="TheTable" " >
<tr class="ClientTablehead" height="25">
<td>产品编号</td>
<td edit="true">产品名称</td>
<td edit="true">单位</td>
<td edit="true">数量</td>
<td>合计</td>
</tr>
<tr class="ClientTablerow" height="25">
<td width="20%">cell(1,1)
<input type="hidden" id="recEdited1" value="false"></td>
<td width="20%" edit="true">cell(1,2)</td>
<td width="20%" edit="true">cell(1,3)</td>
<td width="20%" edit="true">cell(1,4)</td>
<td width="20%">cell(1,5)</td>
</tr>
<tr class="ClientTablerow" height="25">
<td width="20%">cell(2,1)
<input type="hidden" id="recEdited2" value="false"></td>
<td width="20%" edit="true">cell(2,2)</td>
<td width="20%" edit="true">cell(2,3)</td>
<td width="20%" edit="true">cell(2,4)</td>
<td width="20%">cell(2,5)</td>
</tr>
<tr class="ClientTablerow" height="25">
<td width="20%">cell(3,1)
<input type="hidden" id="recEdited3" value="false"></td>
<td width="20%" edit="true">cell(3,2)</td>
<td width="20%" edit="true">cell(3,3)</td>
<td width="20%" edit="true">cell(3,4)</td>
<td width="20%">cell(3,5)</td>
</tr>
<tr class="ClientTablesum" height="25">
<td> </td>
<td edit="true"> </td>
<td edit="true"> </td>
<td edit="true"> </td>
<td> </td>
</tr>
</TABLE>
</div>
<INPUT type="hidden" name="saveData">
<br>
<input type="button" value="submit" onclick="fnOK()">
</form>
<SCRIPT language="javascript">
<!--
var lastSelection = null;//最后被选中的表元对象
var lastSelectedRowNum = null;
var lastSelectedCellNum = null;//取得表格行
function findRow(e)
{
if (e.tagName == "TR") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findRow(e.parentElement);
}
}
//取得表元
function findCell(e) {
if (e.tagName == "TD") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findCell(e.parentElement);
}
}
//取得选中单元格的行号
function getSelectedRowNum(el)
{
var oRow = findRow(el);
return oRow.sectionRowIndex;
}
//取得选中单元格的列号
function getSelectedCellNum(el)
{
var oCell = findCell(el);
return oCell.cellIndex;
}
//定义选中表元的样式
function selectCell(oCell)
{
oCell.Style="display:block";
oCell.Style="backgroundcolor:#66FFFF";
//oCell.runtimeStyle.borderColor = "#336699";
//oCell.runtimeStyle.borderWidth = "2px";
//oCell.runtimeStyle.borderStyle = "solid";
//oCell.runtimeStyle = "ClientTableflateditbox"
}//取消选中表元的样式
function deselectCell(oCell)
{
//oCell.runtimeStyle.borderColor = "";
// oCell.runtimeStyle.borderWidth = "1px";
//oCell.runtimeStyle.borderStyle = "solid";
}function isNotSelectedCell(el)
{
if((lastSelectedRowNum == getSelectedRowNum(el)) && (lastSelectedCellNum == getSelectedCellNum(el)))
return false;
return true;
}function select(el)
{
var srcElem;
if(el == null)
srcElem = window.event.srcElement;
else
srcElem = el;
if(srcElem.tagName == "INPUT")
srcElem = srcElem.parentElement;
if(isNotSelectedCell(srcElem) && (srcElem.getAttribute("edit")))
{
if(lastSelection != null)
{
deselectCell(lastSelection);
endEditContents(lastSelection);
}
if(srcElem.tagName == "INPUT")
srcElem = srcElem.parentElement;
selectCell(srcElem);
editContents(srcElem);
lastSelection = srcElem;
lastSelectedRowNum = getSelectedRowNum(srcElem);
lastSelectedCellNum = getSelectedCellNum(srcElem);
}else
{
return;
}
}TheTable.onclick = select;
//取消单元格选中
function cancelSelect()
{
var srcElem = window.event.srcElement;
if(srcElem.tagName != "BODY")
return;
if(lastSelection != null)
{
deselectCell(lastSelection);
endEditContents(lastSelection);
lastSelection = null;
lastSelectedRowNum = null;
lastSelectedCellNum = null;
}
}document.onclick = cancelSelect;
//编辑单元格内容
function editContents(el)
{
var cellValue = el.innerHTML;
document.all.oldValue.value = cellValue;
var inputWidth = el.offsetWidth;
//var oInput = document.createElement("INPUT");
//oInput.type = "text";
//oInput.style="ClientTableflateditbox"
//oInput.style.width = inputWidth;
//oInput.style.borderWidth = "0px";
//oInput.id = "editCell";
//oInput.onblur = doOnBlur;
//el.appendChild(oInput);
//oInput.value = cellValue;
el.childNodes[0].removeNode();
el.innerHTML = '<input type="text" class="ClientTableflateditbox" id="editCell" value="'+cellValue+'" style="background:#66FFFF;width:100%;height:90%">';
//oInput.focus();
//oInput.select();
}
function doOnBlur()
{
if(lastSelection != null)
{
deselectCell(lastSelection);
endEditContents(lastSelection);
lastSelection = null;
lastSelectedRowNum = null;
lastSelectedCellNum = null;
}}
function endEditContents(el)
{
if(el.tagName != "TD")
return;
var oInput = el.children(0);
el.innerHTML = oInput.value;
if(document.all.oldValue.value != oInput.value)
{
updataEditStatus(el,"true");
}
}
//更新记录状态,是否更新过
function updataEditStatus(oCell,blValue)
{
if(oCell.tagName != "TD")
return;
var oHiddenTD = oCell.parentElement.cells[0];
if(oHiddenTD != null)
{
if(oHiddenTD.childNodes[1])
{
oHiddenTD.childNodes[1].value = blValue;
}
}
}function getSaveTableRowNum()
{
var oRowArr = new Array();
var oTable = document.all.TheTable;
for(var i=0;i<oTable.rows.length;i++)
{
var oHidden = oTable.rows[i].cells[0].childNodes[1];
if(oHidden.value == "true")
{
oRowArr.push(oTable.rows[i].sectionRowIndex);
oHidden.value = "false";
}
}
//alert("rows="+oRowArr.length);
return oRowArr;
}//取得表格中已经变动的数据记录
//返回数组
//数组中的元索为字符串，该字符串内容为要保存行的可编辑列中的数据以"^"分隔
function getTableContents()
{
var oTable = document.all.TheTable;
var oRowArr = new Array();
var rowStr = "";
var rowIndexArr = new Array();
rowIndexArr = getSaveTableRowNum();//取得要保存的行索引号
if(rowIndexArr == null)
return;
for(var i=0;i<rowIndexArr.length;i++)
{
var oCell = oTable.rows[rowIndexArr[i]].cells;
for(var j=0;j<oCell.length;j++)
{
if(oCell[j].getAttribute("edit"))
{
if(j == oCell.length - 1)
{
rowStr += oCell[j].innerText;
}else
{
rowStr += oCell[j].innerText + "^";
}
}
}
oRowArr.push(rowStr);
rowStr = "";
}
return oRowArr;
}//返回要提交的数据的XML格式
//参数为数组，该数组值为函数getTableContents的返回值
function ArrayToXML(recArr)
{
var xmlHeader = '<?xml version="1.0" encoding="GB2312"?>';
var strXML = "";
var oCellArr = new Array();
if(recArr != null)
{
strXML += xmlHeader;
strXML += "<datas>";
for(var i=0;i<recArr.length;i++)
{
oCellArr = recArr[i].split("^");
strXML += "<data>";
strXML += "<name>"+oCellArr[0]+"</name>";
strXML += "<sex>"+oCellArr[1]+"</sex>";
strXML += "<age>"+oCellArr[2]+"</age>";
strXML += "</data>";
}
strXML += "</datas>";
}
return strXML;
}//判断表格中的内容是否修改过，如果内容修改过则返回true，否则返回false
function checkSubmitStatus()
{
var canSubmit = false;
var oTable = document.all.TheTable;
for(var i=0;i<oTable.rows.length;i++)
{
var oHidden = oTable.rows[i].cells[0].childNodes[1];
if(oHidden.value == "true")
{
canSubmit = true;
}
}
return canSubmit;
}function fnOK()
{
if(checkSubmitStatus())
{
cancelSelect();
var strXML = ArrayToXML(getTableContents());
document.form1.saveData.value = strXML;
alert(document.form1.saveData.value);
document.form1.submit();
}
}
-->
</script>
</BODY>
</HTML>