1.1如何实现可在线编辑数据的HTML表格的应用实例
1、实现在线表格数据的编辑功能的页面内容及相关的CSS样式代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>个人网页设计模板app
<script type="text/javascript" src=" editTableRow.js"></script>
<style type="text/css" media="all">
table#dataTableID td, th
{
text-align: center;
}
</style>
</head>
<body>
<table id="dataTableID" border="1">
<thead>
<tr> <th>书名</th> <th>简要介绍</th> <th>作者</th><th>出版社</th><th>出版时间</th> <th>价格</th><th><input onclick="addNewRow(this,7);" id="add" value="添加一行" type="button" /></th> </tr>
</thead> <tbody>
<tr>
<td><span>AJAX编程技术</span></td><td><span>“AJAX编程技术”的书的简要介绍</span></td>
<td ><span>张三</span></td><td ><span>电子工业出版社</span></td>
<td ><span>2007年1月</span></td> <td ><span>35.5</span></td> <td >
<input onclick="editThisRow(this,1,7);" id="edit" value="编辑该行" type="button" /> <input onclick="deleteThisRow(this,1);" id="edit" value="删除该行" type="button" /> </td> </tr> </tbody></table>
</body>
</html>
2、editTableRow.js的脚本程序的代码如下
var uniqueRow = 0;
function addNewRow(inputButtonObj,cellCount){
var inputButtonTempObj = inputButtonObj;
while (!inputButtonTempObj.id || inputButtonTempObj.id != "dataTableID"){ inputButtonTempObj = inputButtonTempObj.parentNode;
}
var tbodyObj = ElementsByTagName("tbody")[0]; // <tbody> var newTR = ateElement('tr'); //新增的数据行包含有三个单元格
var newTDs = new Array(cellCount);
for(var index=0; index< cellCount; index++){
newTDs[index]=ateElement('td');
}
var newInputs = new Array(cellCount);
for(var index=0; index< cellCount; index++){
newInputs[index]=ateElement('input'); //<input>
}
for(var index=0; index< (cellCount-1); index++){ // <input type="text" >
newInputs[index].type="text";
newInputs[index].maxLength="128";
newInputs[index].name="colName"+index; // <input type="text" name="colNameX">
newInputs[index].value=""; //新增的行中单元格的初始值// <input type="text" name="colNameX" value="">
}
newInputs[cellCount-1].type= "button"; //设置"保存"按钮的类型
newInputs[cellCount-1].id = "saveButtonName"+(++uniqueRow); //设置"保存"按钮的id名称newInputs[cellCount-1].value = "保存该行";
newInputs[cellCount-1].onclick = function(){
var inputButtonValue=new Array(cellCount-1);
for(var index=0; index< cellCount-1; index++){
inputButtonValue[index]=newInputs[index].value;
}
saveNewRow(inputButtonValue);
};
for (var index=0; index < newTDs.length; index++){
newTDs[index].appendChild(newInputs[index]); // <td> <input type="text" name="colNameX" value=""> </td>
newTR.appendChild(newTDs[index]); // <tr> <td> </td> ... </tr>
}
tbodyObj.insertBefore(newTR, null); // <tbody>..... <tr> </tr> </tbody>
}
function saveNewRow(inputButtonValue){
var newRowData="";
for(var index=0; index < inputButtonValue.length;index++){
newRowData=newRowData+"dataName"+index+"="+inputButtonValue[index]+"&";
}
newRowData = newRowData+"dataCount="+inputButtonValue.length //只需要将newRowData 作为查询参树字符串向服务器发送
document.write(newRowData);
}
//***************************************************************************** function editThisRow(inputButtonObj,dataID,cellCount) { //dataID 代表要编辑的数据行的主键ID值
var inputButtonTempObj = inputButtonObj;
while (!inputButtonTempObj.tagName || LowerCase() != "tr"){ inputButtonTempObj = inputButtonTempObj.parentNode;
}
var allSpanTagArray = ElementsByTagName("span");
var allSpanTagValueArray = [];
for (var i=0,len=allSpanTagArray.length; i < len; i++){
allSpanTagValueArray[allSpanTagValueArray.length] = allSpanTagArray[i].deValue;
}
ElementById('add'),Sibling,
allSpanTagValueArray,dataID,cellCount);
veChild(inputButtonTempObj);
}
function editThisRowData(inputButtonObj, sibBefore, vals,dataID,cellCount){
var inputButtonTempObj = inputButtonObj;
while (!inputButtonTempObj.id || inputButtonTempObj.id != "dataTableID")
inputButtonTempObj = inputButtonTempObj.parentNode;
var tbodyObj = ElementsByTagName("tbody")[0];
var newTR = ateElement('tr'); //新增的数据行包含有三个单元格
var newTDs = new Array(cellCount);
for(var index=0; index< cellCount; index++){
newTDs[index]=ateElement('td');
}
var newInputs = new Array(cellCount);
for(var index=0; index< cellCount; index++){
newInputs[index]=ateElement('input');
}
for(var index=0; index< (cellCount-1); index++){
newInputs[index].type="text";
newInputs[index].maxLength="128";
newInputs[index].name="colName"+index;
newInputs[index].value=vals[index]; //获得原来表格单元格中的原来数据
}
newInputs[cellCount-1].type= "button"; //设置"保存"按钮的类型
newInputs[cellCount-1].id = "saveButtonName"+(++uniqueRow); //设置"保存"按钮的id名称newInputs[cellCount-1].value = "保存该行";
newInputs[cellCount-1].onclick = function(){
var inputButtonValue=new Array(cellCount-1);
for(var index=0; index< cellCount-1; index++){
inputButtonValue[index]=newInputs[index].value;
}
saveThisRowData(inputButtonValue,dataID);
};
for (var index=0; index < newTDs.length; index++){
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论