js可編輯表格_怎麼用js做一個表格

⑴ 用js實現表格修改

jquery會不會？你這些功能太簡單了.... 添加行 $("<tr><td></td></tr>").appendTo(你要加入的位置); 日期有專業的控版件添加文本框，文本域權，下拉框都跟添加表格類似，修改創建表格的部分即可，點擊修改後，用 $.post("URL",參數,function(data){ 返回參數 });

記得採納啊

⑵ JS可以實現點擊表格tr讓其變成可編輯輸入的狀態么

可以實現的。具體的實現方式如下，在點擊表格中的tr時，使用createElement創建input元素，然後append到每個td中，這樣就實現了點擊表格可編輯的效果。

⑶ js中怎麼使控製表格內容是否可編輯

disabled readonly

⑷ 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>
按照這個思路應該能實現你的功能。

⑸ 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);
}

}

⑹ 用js怎麼建表格

js dom創建表格
<html>
<head>
<title>Table test</title>
</head>
<body>
<div id="tableTest">
</div>
</body>
</html>
<script language="javaScript" type="text/javascript">

⑺ 怎麼用js做一個表格

1．在頁面div中創建一個空白表，可以根據需要對其進行定製。

⑻ JS 可編輯表格問題

不明白你這么做的意義，，本來radio是不可以編輯的，你何必要判斷呢。？
而且你這么寫也有問題啊。
這個是獲取input 類型的
document.getElementById("test_001").type
$("#test_001")[0].type

你也可以改成this

⑼ 如何用js實現點擊按鈕使table某一單元格變為可編輯狀態

具體步驟
1.復制原來那個單元格裡面的內容到一個變數
2.將那個單元格的內容替換為一個輸入框(input)
3.將那個變數的內容賦值給輸入框

反向操作：
1.取得輸入框里的內容並賦值給一個變數
2.將單元格清空，並將那個變數的值填寫到單元格里

⑽ 用js創建的可編輯的bootstrap表格。

之前介紹bootstrapTable組件的時候有提到它的行內編輯功能，只不過為了展示功能，將此一筆帶過了，罪過罪過！最近項目裡面還是打算將行內編輯用起來，於是再次研究了下x-editable組件，遇到過一些坑，再此做個采坑記錄吧！想要了解bootstrapTable的朋友可以移步JS組件系列——表格組件神器：bootstrap table。
一、x-editable組件介紹
x-editable組件是一個用於創建可編輯彈出框的插件，它支持三種風格的樣式：bootstrap、Jquery UI、Jquery。大致效果如下圖：

根據博主一貫的風格，這里肯定是選用第一種嘍。首先還是給出開源地址吧。
x-editable開源地址：https://github.com/vitalets/x-editable
x-editable文檔地址：http://vitalets.github.io/x-editable/docs.html
x-editable在線Demo：http://vitalets.github.io/x-editable/demo-bs3.html
1、x-editable初體驗

首先下載基於bootstrap的源碼到本地。引用相關文件。

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>

頁面元素

復制代碼代碼如下:
<a href="#" id="username" data-type="text" data-title="用戶名">用戶名</a>

js初始化

$(function () {
$('#username').editable();
});

導航:首頁 > 編程語言 > js可編輯表格

js可編輯表格

與js可編輯表格相關的資料

友情鏈接