HTML+JS怎样来实现可编辑表格
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
}
//设置指定单元格可编辑 function EditCell(element, editType){
var editType = element.getAttribute("EditType"); if(!editType){
//如果当前单元格没有指定，则查看当前列是否指定
editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType"); }
//如果当前单元格没有指定，则查看当前列是否指定 editType = row.parentNode.rows[0].cells[j].getAttribute("EditType"); } if(editType){ row.cells[j].onclick = function (){
EditCell(this); } } }
//创建下接框 var downList = document.createElement("Select"); downList.className="EditCell_DropDownList";
//添加列表项 var items = element.getAttribute("DataItems"); if(!items){
//设置文本框的失去焦点事件 textBox.onblur = function (){
CancelEditCell(this.parentNode, this.value); }
//向当前单元格添加文本框 ClearChild(element); element.appendChild(textBox); textBox.focus(); textBox.select();
量</td>
<td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数
</td>
<td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价
<td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,
//改变状态变量 element.setAttribute("EditState", "true"); element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex); }
}
//为单元格创建选择框 function CreateDropDownList(element, value){ //检查编辑状态，如果已经是编辑状态，跳过 var editState = element.getAttribute("EditState"); if(editState != "true"){
// 设置表格可编辑 // 可一次设置多个，例如：EditTables(tb1,tb2,tb2,......) EditTables(tabProduct);
</script> </body> </html> //下面为引入所用的JS GridEdit.js /** * JS实现可编辑的表格 * 用法:EditTables(tb1,tb2,tb2,......); * Create by Senty at 2008-04-12
} }
//为单元格创建可编辑输入框 function CreateTextBox(element, value){ //检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState"); if(editState != "true"){
<td bgcolor="#FFFFFF">2</td> <td bgcolor="#FFFFFF" Value="d">D</td> <td bgcolor="#FFFFFF">0</td> <td bgcolor="#FFFFFF">0</td> <td bgcolor="#FFFFFF">0</td> </tr> </table>
**/
//设置多个表格可编辑 function EditTables(){ for(var i=0;i<arguments.length;i++){
SetTableCanEdit(arguments[i]); } }
//设置表格是可编辑的 function SetTableCanEdit(table){ for(var i=1; i<table.rows.length;i++){
<td bgcolor="#FFFFFF" Value="c">C</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
</tr> <tr>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>
<body> <form id="form1" name="form1" method="post" action=""> <h3>可编辑的表格</h3> <table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">
<br /> <input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" /> <input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" /> <input type="button" name="Submit22" value="重置" onclick="window.location.reload()" /> <input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />
</form>
<script language="javascript" src="GridEdit.js"></script> <script language="javascript"> var tabProduct = document.getElementById("tabProduct");
switch(editType){ case "TextBox": CreateTextBox(element, element.innerHTML); break; case "DropDownList": CreateDropDownList(element); break; default: break;
<td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">商品 名称</td>
SetRowCanEdit(table.rows[i]); } }
function SetRowCanEdit(row){ for(var j=0;j<row.cells.length; j++){
//如果当前单元格指定了编辑类型，则表示允许编辑
var editType = row.cells[j].getAttribute("EditType"); if(!editType){
HTML+JS实现可编辑表格
博客分类： JavaScript htmljavascriptcss
实现可视化编辑表格操作... HTML文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>编辑表格数据</title> <style type="text/css"> <!-body,div,p,ul,li,font,span,td,th{ font-size:10pt; line-height:155%;
//创建文本框 var textBox = document.createElement("INPUT"); textBox.type = "text"; textBox.className="EditCell_TextBox";
//设置文本框当前值 if(!value){
value = element.getAttribute("Value"); } textBox.value = value;
#.00">合计</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>
<td bgcolor="#FFFFFF">1</td>
<tr> <td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input
type="checkbox" name="checkbox" value="checkbox" /></td>
wk.baidu.com
</td>
<td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号
} table{ border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-top-color: #CCCCCC; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; } td{ border-bottom-width: 1px; border-bottom-style: solid;
border-bottom-color: #CCCCCC; } .EditCell_TextBox { width: 90%; border:1px solid #0099CC; } .EditCell_DropDownList { width: 90%; } --> </style> </head>
//设置指定单元格可编辑 function EditCell(element, editType){
var editType = element.getAttribute("EditType"); if(!editType){
//如果当前单元格没有指定，则查看当前列是否指定
editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType"); }
//如果当前单元格没有指定，则查看当前列是否指定 editType = row.parentNode.rows[0].cells[j].getAttribute("EditType"); } if(editType){ row.cells[j].onclick = function (){
EditCell(this); } } }
//创建下接框 var downList = document.createElement("Select"); downList.className="EditCell_DropDownList";
//添加列表项 var items = element.getAttribute("DataItems"); if(!items){
//设置文本框的失去焦点事件 textBox.onblur = function (){
CancelEditCell(this.parentNode, this.value); }
//向当前单元格添加文本框 ClearChild(element); element.appendChild(textBox); textBox.focus(); textBox.select();
量</td>
<td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数
</td>
<td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价
<td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,
//改变状态变量 element.setAttribute("EditState", "true"); element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex); }
}
//为单元格创建选择框 function CreateDropDownList(element, value){ //检查编辑状态，如果已经是编辑状态，跳过 var editState = element.getAttribute("EditState"); if(editState != "true"){
// 设置表格可编辑 // 可一次设置多个，例如：EditTables(tb1,tb2,tb2,......) EditTables(tabProduct);
</script> </body> </html> //下面为引入所用的JS GridEdit.js /** * JS实现可编辑的表格 * 用法:EditTables(tb1,tb2,tb2,......); * Create by Senty at 2008-04-12
} }
//为单元格创建可编辑输入框 function CreateTextBox(element, value){ //检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState"); if(editState != "true"){
<td bgcolor="#FFFFFF">2</td> <td bgcolor="#FFFFFF" Value="d">D</td> <td bgcolor="#FFFFFF">0</td> <td bgcolor="#FFFFFF">0</td> <td bgcolor="#FFFFFF">0</td> </tr> </table>
**/
//设置多个表格可编辑 function EditTables(){ for(var i=0;i<arguments.length;i++){
SetTableCanEdit(arguments[i]); } }
//设置表格是可编辑的 function SetTableCanEdit(table){ for(var i=1; i<table.rows.length;i++){
<td bgcolor="#FFFFFF" Value="c">C</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
</tr> <tr>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>
<body> <form id="form1" name="form1" method="post" action=""> <h3>可编辑的表格</h3> <table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">
<br /> <input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" /> <input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" /> <input type="button" name="Submit22" value="重置" onclick="window.location.reload()" /> <input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />
</form>
<script language="javascript" src="GridEdit.js"></script> <script language="javascript"> var tabProduct = document.getElementById("tabProduct");
switch(editType){ case "TextBox": CreateTextBox(element, element.innerHTML); break; case "DropDownList": CreateDropDownList(element); break; default: break;
<td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">商品 名称</td>
SetRowCanEdit(table.rows[i]); } }
function SetRowCanEdit(row){ for(var j=0;j<row.cells.length; j++){
//如果当前单元格指定了编辑类型，则表示允许编辑
var editType = row.cells[j].getAttribute("EditType"); if(!editType){
HTML+JS实现可编辑表格
博客分类： JavaScript htmljavascriptcss
实现可视化编辑表格操作... HTML文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>编辑表格数据</title> <style type="text/css"> <!-body,div,p,ul,li,font,span,td,th{ font-size:10pt; line-height:155%;
//创建文本框 var textBox = document.createElement("INPUT"); textBox.type = "text"; textBox.className="EditCell_TextBox";
//设置文本框当前值 if(!value){
value = element.getAttribute("Value"); } textBox.value = value;
#.00">合计</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>
<td bgcolor="#FFFFFF">1</td>
<tr> <td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input
type="checkbox" name="checkbox" value="checkbox" /></td>
wk.baidu.com
</td>
<td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号
} table{ border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-top-color: #CCCCCC; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; } td{ border-bottom-width: 1px; border-bottom-style: solid;
border-bottom-color: #CCCCCC; } .EditCell_TextBox { width: 90%; border:1px solid #0099CC; } .EditCell_DropDownList { width: 90%; } --> </style> </head>