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相關的資料

友情鏈接