edittablejsapi_Javascript实现把网页中table的内容导出到excel中的几种方法

A. bootstrap table 获取数据里面的id可以重新请求数据展

项目中使用BootStrap editTable 进行行内编辑，编辑后并不实时的修改某列的值，而是在所有需要修改的列修改后，点击后面的【确认投资】按钮，一次性保存所修改的列。

由于【确认投资】是页面第一次初始化后出现的，而这时需要修改的列是没有值的，对列进行编辑后，点击按钮是不能获取到编辑后的值。

经过学习Bootstrap editTable 和 bootstarp table的API,找到了解决方案。

方法/步骤

1
引入bootstarp edittable 的 js，css 文件：
<link href="${basePath}/STATIC/plugins/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
<script src="${basePath}/STATIC/plugins/bootstrap3-editable/js/bootstrap-table-editable.js"></script>
<script src="${basePath}/STATIC/plugins/bootstrap3-editable/js/bootstrap-editable.js"></script>
注意：bootstrap-table-editable.js 不属于bootstrap3-editable 里面，是第三方或个人扩展的，可以从网上下载。
2
特定的列进行行内编辑：
field: 'autualFinanceAmount',
title: '实际融资金额（万元）',
width: 160,
align: 'center',
formatter:function(value,row,index){
if(value == null || value == ''){
return "-";
}
return value;
},
editable: {
type: 'text',
title: '实际融资金额',
validate: function (v) {
if (!v) return '实际融资金额不能为空';
//正则校验输入格式：最多两位小数。
var patrn=/^([1-9]d*.d{1,2}|0.d[1-9]|[1-9]d*)$/;
if(!patrn.test(v)){
return '输入格式：最多两位小数';
}
}
}
3
当某列编辑完成后，需要对当前列所在的行进行修改操作：
$("#grid").bootstrapTable({
url:'',
……
…… //其他属性
columns:[{
field:'rowId',
title:'序号',
width:30,
align: 'center',
formatter:function(value,row,index){
row.rowId = index;
return index+1;
}
…… //其他列
}],
onEditableSave: function (field, row, oldValue, $el) {
$table = $('#grid').bootstrapTable({});
$table.bootstrapTable('updateRow', {index: row.rowId, row: row});
}
注意：黑色粗体字就是新增的代码，表示在列编辑完成后，对当前列所在的行进行修改。
index 表示该行所在的索引。由于onEditableSave函数的参数中没有index，只能自己特殊处理了。看到在columns属性中，有一个field:'rowId’就是自己处理的，rowId赋给row。
4
如果你的列中有
formatter:function(value,row,index){} 函数，
在onEditableSave 方法执行完成后，该函数会重新执行，这样就会把修改后的列的值重新拿到进行处理。

B. javascript实现把网页中table的内容导出到excel中的几种方法

一、直接拷贝整个表格到中二、通过遍历表格，给EXCEL中相应的单元格赋值。三、把表格中的内容提取出来，利用IE的另存为.csv的格式。各方法的好处：1. 直接拷贝表格，能够保留表格中的原有的格式，比如，列，行的合并，对齐方式，底色等等，2. 通过遍历表格，比较灵活，可以遍历表格某些需要部分的内容。3. 利用IE的另存为，不用创建ActiveXObject对象，可以处理表格合并方面的问题。各方法的缺点：1. 可能弹出脚本错误：Automation不能创建对象。解决方法：启用IE安全设置中的：对没有标记为安全的ActiveX控件进行初始化和脚本运行。由于整个表格复制到EXCEL中，给表格加个标题，并加入到EXCEL中可能会遇到麻烦。解决方法：首先在表格中加入第一行<tr><td colspan="x" align="center">&</td></tr>X，表示整个表格的列数，复制完整个表格后,加如下代码，oSheet为当前活动的sheet.oSheet.Range(oSheet.Cells(1, 1), oSheet.Cells(1, x)).value = "表格标题";//设置标题oSheet.Rows(1).Font.Size = 16; //设置文字大小oSheet.Rows(1).Font.Name = "宋体";//设置文字字体注：以下属性我没用着，可能有用，也可能会报错oSheet.Range(oSheet.Cells(1,1), oSheet.Cells(1,14)).mergecells=true; //合并单元格oSheet.Range(oSheet.Cells(1,1), oSheet.Cells(1,14)).Interior.ColorIndex=6;//设置底色?oSheet.Range(oSheet.Cells(1,1), oSheet.Cells(1,14)).Font.ColorIndex=5;//设置字体色?oSheet.Rows(1).RowHeight=20; //设置列高oSheet.Cells(iRow,iCol).Halignment=’2’//设置字体居中2. 可能弹出脚本错误：Automation不能创建对象（解决方法如上）。表格内容写入到EXCEL中无表格线（未解决）且有单元格合并时会有问题，解决方法：合并单元格后再写数据。oSheet.Range(oSheet.Cells(1,1), oSheet.Cells(1,14)).mergecells=true; //合并单元格3. 表格内容写入到EXCEL中无表格线（未解决）表格格式复杂时，会有问题，（rowspan>1 or colspan>1）,解决方法：一般都是表头格式比较复杂，可先把表头写死，然后再循环写其他数据。代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD> <BODY>
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0"><tr><td colspan="5" align="center">WEB页面导出为EXCEL文档的方法</td></tr><tr><td>列标题1</td><td>列标题2</td><td>列标题3</td><td>列标题4</td><td>列标题5</td></tr><tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td><td>eee</td></tr><tr><td>AAA</td><td>BBB</td><td>CCC</td><td>DDD</td><td>EEE</td></tr><tr><td>FFF</td><td>GGG</td><td>HHH</td><td>III</td><td>JJJ</td></tr></table>
<input type="button" onclick="javascript:method1('tableExcel');" value="第一种方法导入到EXCEL"><input type="button" onclick="javascript:method2('tableExcel');" value="第二种方法导入到EXCEL"><input type="button" onclick="javascript:getXlsFromTbl('tableExcel',null);" value="第三种方法导入到EXCEL">
<SCRIPT LANGUAGE="javascript">function method1(tableid)
{//整个表格拷贝到EXCEL中var curTbl = document.getElementById(tableid);var oXL = new ActiveXObject("Excel.Application");//创建AX对象excelvar oWB = oXL.Workbooks.Add();//获取workbook对象var oSheet = oWB.ActiveSheet;//激活当前sheetvar sel = document.body.createTextRange();sel.moveToElementText(curTbl);//把表格中的内容移到TextRange中sel.select();//全选TextRange中内容sel.execCommand("Copy");//复制TextRange中内容oSheet.Paste();//粘贴到活动的EXCEL中oXL.Visible = true;//设置excel可见属性}function method2(tableid) //读取表格中每个单元到EXCEL中
{var curTbl = document.getElementById(tableid);var oXL = new ActiveXObject("Excel.Application");//创建AX对象excelvar oWB = oXL.Workbooks.Add();//获取workbook对象var oSheet = oWB.ActiveSheet;//激活当前sheetvar Lenr = curTbl.rows.length;//取得表格行数for (i = 0; i < Lenr; i++){var Lenc = curTbl.rows(i).cells.length;//取得每行的列数for (j = 0; j < Lenc; j++){oSheet.Cells(i + 1, j + 1).value = curTbl.rows(i).cells(j).innerText;//赋值}}oXL.Visible = true;//设置excel可见属性}function getXlsFromTbl(inTblId, inWindow) {try {var allStr = "";var curStr = "";//alert("getXlsFromTbl");if (inTblId != null && inTblId != "" && inTblId != "null") {curStr = getTblData(inTblId, inWindow);}if (curStr != null) {allStr += curStr;}else {alert("你要导出的表不存在！");return;}var fileName = getExcelFileName();doFileExport(fileName, allStr);}catch(e) {alert("导出发生异常:" + e.name + "->" + e.description + "!");}}
//---------------------------------------------
function getTblData(inTbl, inWindow) {var rows = 0;//alert("getTblData is " + inWindow);var tblDocument = document;if (!!inWindow && inWindow != "") {if (!document.all(inWindow)) {return null;}else {tblDocument = eval(inWindow).document;}}var curTbl = tblDocument.getElementById(inTbl);var outStr = "";if (curTbl != null) {for (var j = 0; j < curTbl.rows.length; j++) {//alert("j is " + j);for (var i = 0; i < curTbl.rows[j].cells.length; i++) {//alert("i is " + i);if (i == 0 && rows > 0) {outStr += " ";rows -= 1;}outStr += curTbl.rows[j].cells[i].innerText + " ";if (curTbl.rows[j].cells[i].colSpan > 1) {for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {outStr += " ";}}if (i == 0) {if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {rows = curTbl.rows[j].cells[i].rowSpan - 1;}}}outStr += " ";}}else {outStr = null;alert(inTbl + "不存在!");}return outStr;}function getExcelFileName() {var d = new Date();var curYear = d.getYear();var curMonth = "" + (d.getMonth() + 1);var curDate = "" + d.getDate();var curHour = "" + d.getHours();var curMinute = "" + d.getMinutes();var curSecond = "" + d.getSeconds();if (curMonth.length == 1) {curMonth = "0" + curMonth;}if (curDate.length == 1) {curDate = "0" + curDate;}if (curHour.length == 1) {curHour = "0" + curHour;}if (curMinute.length == 1) {curMinute = "0" + curMinute;}if (curSecond.length == 1) {curSecond = "0" + curSecond;}var fileName = "leo_zhang" + "_" + curYear + curMonth + curDate + "_"+ curHour + curMinute + curSecond + ".csv";//alert(fileName);return fileName;}function doFileExport(inName, inStr) {var xlsWin = null;if (!!document.all("glbHideFrm")) {xlsWin = glbHideFrm;}else {var width = 6;var height = 4;var openPara = "left=" + (window.screen.width / 2 - width / 2)+ ",top=" + (window.screen.height / 2 - height / 2)+ ",scrollbars=no,width=" + width + ",height=" + height;xlsWin = window.open("", "_blank", openPara);}xlsWin.document.write(inStr);xlsWin.document.close();xlsWin.document.execCommand('Saveas', true, inName);xlsWin.close();}

C. 只用js如何实现表格内容的动态修改

<body>

<tableid='test'>//定义一个table

<tr>

</tr>

</table>

vartb=document.getElementById('test');//获取表格的dom节点

vartd=tb.rows[0].cells[0];//获取0行0列的td单元格

td.innerHTML='222';//动态修改表格的内容为222

</script>

</body>

思路：

1、获取表格的dom节点

2、通过rows和cells定位td单元格

3、通过修改innerHTML

(3)edittablejsapi扩展阅读：

JS实现动态表格的新增，修改，删除操作

一、相关JS函数

function setParamslist() {

var tab = document.getElementById("tab");

//表格行数

var rows = tab.rows.length ;

//表格列数

var cells = tab.rows.item(0).cells.length ;

//alert("行数"+rows+"列数"+cells);

var rowData = "";

for(var i=1;i<rows;i++) {

var cellsData = new Array();

for(var j=0;j<cells-1;j++) {

cellsData.push(tab.rows[i].cells[j].innerText);

}

rowData = rowData + "|" + cellsData;

}

document.getElementById("paramslist").value = rowData;

}

//打开相关新增应用参数界面

function openAppParamsPage() {

var param = new Object();

//这个参数一定要传。

param.win = window;

param.id = 100;

param.name = "test";

param.birthday = new Date();

var result = window.showModalDialog("addParamsItem","dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=200px");

//var temp = document.getElementById("paramslist").value;

//document.getElementById("paramslist").value = temp + result;

addSort(result);

}

// 增加应用参数函数

function addSort(data) {

var name = data;

if(name == ""||name==undefined ) {

return;

}

console.log(data);

var params = data.split(",");

var paramName = params[0];

var paramCode = params[1];

var paramValue = params[2];

var row = document.createElement("tr");

row.setAttribute("id", paramCode);

var cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramName));

row.appendChild(cell);

cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramCode));

row.appendChild(cell);

cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramValue));

row.appendChild(cell);

var deleteButton = document.createElement("input");

deleteButton.setAttribute("type", "button");

deleteButton.setAttribute("value", "删除");

deleteButton.onclick = function () { deleteSort(paramCode); };

cell = document.createElement("td");

cell.appendChild(deleteButton);

row.appendChild(cell);

document.getElementById("sortList").appendChild(row);

}

// 删除应用参数函数

function deleteSort(id) {

if (id!=null){

var rowToDelete = document.getElementById(id);

var sortList = document.getElementById("sortList");

sortList.removeChild(rowToDelete);

}

二、弹出框页面，新增或者修改参数，并回写相关数据。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<#include "/views/head.html"/>

</head>

<body>

<form >

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

//直接关闭窗口

function closeWindow() {

window.close();

}

//获取值，组装后返回

function returnResult() {

if(!$('form').valid())

return;

var paramName = document.getElementById("paramName");

var paramCode = document.getElementById("paramCode");

var paramValue = document.getElementById("paramValue");

//alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value);

var result = paramName.value + "," + paramCode.value + "," + paramValue.value;

window.returnValue = result;

window.close();

}

</script>

D. 如何在JAVA表格中添加按钮组件

就是JTable中，加入JButton对吧。那个简单。写一个类继承与JButton并实现javax.swing.table.TableCellRenderer接口就行了。
然后用JTable的getColumn（Object）获取列，再用setCellRenderer(TableCellRenderer cellRenderer)方法就可以添加进表格了。
附相关API：
javax.swing.JTable
public TableColumngetColumn(Object identifier)返回表中列的 TableColumn 对象，当使用 equals 进行比较时，表的标识符等于
identifier。

参数：identifier - 标识符对象
返回：与标识符相匹配的 TableColumn 对象

javax.swing.table.TableCellRenderer
public interface TableCellRenderer
此接口定义了要成为 JTable 中单元格渲染器的任意对象所需的方法。

(JTable table,
Object value,
boolean isSelected,
boolean hasFocus,
int row,
int column)返回用于绘制单元格的组件。此方法用于在绘制前适当地配置渲染器。
TableCellRenderer 还负责呈现表示该表当前 DnD 放置位置的单元格（如果有）。如果此呈现器负责呈现 DnD 放置位置，则它应该直接查询表以确定给定的行和列是否表示放置位置：
JTable.DropLocation dropLocation = table.getDropLocation();
if (dropLocation != null
&& !dropLocation.isInsertRow()
&& !dropLocation.isInsertColumn()
&& dropLocation.getRow() == row
&& dropLocation.getColumn() == column) {

// this cell represents the current drop location
// so render it specially, perhaps with a different color
}
在打印操作期间，将调用此方法（isSelected 和 hasFocus 为
false）阻止选择和焦点在打印输出中出现。要根据是否打印表进行其他定制，检查 JComponent.isPaintingForPrint()
的返回值。
参数：table - 要求渲染器绘制的 JTable；可以为 nullvalue - 要呈现的单元格的值。由具体的渲染器解释和绘制该值。例如，如果 value 是字符串
"true"，则它可呈现为字符串，或者也可呈现为已选中的复选框。null 是有效值
isSelected - 如果使用选中样式的高亮显示来呈现该单元格，则为 true；否则为 false
hasFocus - 如果为
true，则适当地呈现单元格。例如，在单元格上放入特殊的边框，如果可以编辑该单元格，则以彩色呈现它，用于指示正在进行编辑
row - 要绘制的单元格的行索引。绘制头时，row 值是 -1
column - 要绘制的单元格的列索引

javax.swing.table.TableColumn
public void setCellRenderer(TableCellRenderer cellRenderer)设置 JTable 用于绘制此列各值的 TableCellRenderer。

参数：cellRenderer - 新的 cellRenderer

E. JS怎么设置可编辑表格的值

* JS实现可编辑的表格
* 用法:EditTables(tb1,tb2,tb2,......);
* Create by Senty at 2008-04-12
**/

//设置多个表格可编辑
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++) {
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) {
//如果当前单元格没有指定，则查看当前列是否指定
editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");
}
if (editType) {
row.cells[j].onclick = function () {
EditCell(this);
}
}
}

}

//设置指定单元格可编辑
function EditCell(element, editType) {

var editType = element.getAttribute("EditType");
if (!editType) {
//如果当前单元格没有指定，则查看当前列是否指定
editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");
}

switch (editType) {
case "TextBox":
CreateTextBox(element, element.innerHTML);
break;
case "DropDownList":
CreateDropDownList(element);
break;
default:
break;
}
}

//为单元格创建可编辑输入框
function CreateTextBox(element, value) {
//检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState");
if (editState != "true") {
//创建文本框
var textBox = document.createElement("INPUT");
textBox.type = "text";
textBox.className = "EditCell_TextBox";

//设置文本框当前值
if (!value) {
value = element.getAttribute("Value");
}
textBox.value = value;

//设置文本框的失去焦点事件
textBox.onblur = function () {
CancelEditCell(this.parentNode, this.value);
}
//向当前单元格添加文本框
ClearChild(element);
element.appendChild(textBox);
textBox.focus();
textBox.select();

//改变状态变量
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);
}
}

//为单元格创建选择框
function CreateDropDownList(element, value) {
//检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState");
if (editState != "true") {
//创建下接框
var downList = document.createElement("Select");
downList.className = "EditCell_DropDownList";

//添加列表项
var items = element.getAttribute("DataItems");
if (!items) {
items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");
}

if (items) {
items = eval("[" + items + "]");
for (var i = 0; i < items.length; i++) {
var oOption = document.createElement("OPTION");
oOption.text = items[i].text;
oOption.value = items[i].value;
downList.options.add(oOption);
}
}

//设置列表当前值
if (!value) {
value = element.getAttribute("Value");
}
downList.value = value;

//设置创建下接框的失去焦点事件
downList.onblur = function () {
CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);
}

//向当前单元格添加创建下接框
ClearChild(element);
element.appendChild(downList);
downList.focus();

//记录状态的改变
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);
}

}

F. js如何实现点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）

给你一个思路，你的table是动态生成的，应该是利用js加载对应的json或者xml等数据结合table、版tr、td的样式生成的。然权后前台可以加载到span或者div里面来展示。
这样你可以尝试一下，点击编辑button后click的事件，尝试重新生成一个table，对应的td的内容修改一下：
<td><input type="text" id="tix" value="(data)"/></td>
按照这个思路应该能实现你的功能。

G. this在这个命名空间的指向，为什么会改变

第一个this只是被方法调用，这时它指向create的上级对象，也就是editTable。
第二个this是被构造函数调用了，这时this的作用域会改变，它这里指向的是(new ObjEditTable)这个完整的新生对象，不再是原来的editTable。

参考：
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。
1、纯粹函数调用。
function test() {
this.x = 1;
alert(x);
}
test();
其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。

var x = 1;
function test() {
alert(this.x);
}
test();//1

var x = 1;
function test() {
this.x = 0;
}
test();
alert(x);//0

2、作为方法调用，那么this就是指这个上级对象。

function test() {
alert(this.x);
}

var o = {};
o.x = 1;
o.m = test;
o.m(); //1

3、作为构造函数调用。所谓构造函数，就是生成一个新的对象。这时，这个this就是指这个对象。
function test() {
this.x = 1;
}
var o = new test();
alert(o.x);//1
4、apply调用
this指向的是apply中的第一个参数。

var x = 0;
function test() {
alert(this.x);
}

var o = {};
o.x = 1;
o.m = test;
o.m.apply(); //0
o.m.apply(o);//1

当apply没有参数时，表示为全局对象。所以值为0。

导航:首页 > 编程语言 > edittablejsapi

edittablejsapi

(3)edittablejsapi扩展阅读：

与edittablejsapi相关的资料

友情链接