网站带app建设,网站建设与管理专业课程,wordpress免费中文完整版主题下载,班级优化大师电脑版html实现在线表格编辑#xff0c;可以修改每个表格内容#xff0c;并且可以添加行和列
这个HTML页面模拟了一个类似Excel的表格#xff0c;可以添加和删除行和列#xff0c;并且可以编辑每个表格的内容。通过点击按钮可以添加新的行和列#xff0c;通过按钮可以删除最后一… html实现在线表格编辑可以修改每个表格内容并且可以添加行和列
这个HTML页面模拟了一个类似Excel的表格可以添加和删除行和列并且可以编辑每个表格的内容。通过点击按钮可以添加新的行和列通过按钮可以删除最后一行和最后一列。每个单元格都可以通过直接点击并编辑来修改内容。 实现代码
!DOCTYPE html
html
headmeta charsetUTF-8titleExcel-like Table/titlestyletable {border-collapse: collapse;table-layout: fixed;width: 100%;}th, td {border: 1px solid black;padding: 5px;text-align: center;}.addRow, .addColumn, .deleteRow, .deleteColumn {margin-bottom: 10px;}button {padding: 5px 10px;}/style
/head
body
divbutton classaddRow onclickaddRow()添加行/buttonbutton classaddColumn onclickaddColumn()添加列/buttonbutton classdeleteRow onclickdeleteRow()删除行/buttonbutton classdeleteColumn onclickdeleteColumn()删除列/buttonbutton classsaveData onclicksaveData()保存数据/button
/div
table idexcelTabletheadtrth contenteditabletrue/thth contenteditabletrueA/thth contenteditabletrueB/thth contenteditabletrueC/thth contenteditabletrueD/th/tr/theadtbodytrth contenteditabletrue1/thtd contenteditabletrue/tdtd contenteditabletrue/tdtd contenteditabletrue/tdtd contenteditabletrue/td/trtrth contenteditabletrue2/thtd contenteditabletrue/tdtd contenteditabletrue/tdtd contenteditabletrue/tdtd contenteditabletrue/td/trtrth contenteditabletrue3/thtd contenteditabletrue/tdtd contenteditabletrue/tdtd contenteditabletrue/tdtd contenteditabletrue/td/trtrth contenteditabletrue4/thtd contenteditabletrue/tdtd contenteditabletrue/tdtd contenteditabletrue/tdtd contenteditabletrue/td/tr/tbody
/table
script srchttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js/script
scriptfunction addRow() {var table document.getElementById(excelTable);var row table.insertRow(-1);var rowIndex table.rows.length - 2;var cell0 row.insertCell(0);cell0.innerHTML rowIndex;cell0.contentEditable true;for (var i 1; i table.rows[1].cells.length; i) {var cell row.insertCell(i);cell.contentEditable true;}}function addColumn() {var table document.getElementById(excelTable);for (var i 0; i table.rows.length; i) {var cell table.rows[i].insertCell(-1);cell.contentEditable true;if (i 0) {var columnIndex table.rows[i].cells.length - 2;cell.innerHTML String.fromCharCode(65 columnIndex);cell.contentEditable true;}}}function deleteRow() {var table document.getElementById(excelTable);if (table.rows.length 2) {table.deleteRow(-1);}}function deleteColumn() {var table document.getElementById(excelTable);if (table.rows[0].cells.length 2) {for (var i 0; i table.rows.length; i) {table.rows[i].deleteCell(-1);}}}function saveData() {var tableData [];var table document.getElementById(excelTable);var tableHeaders [];for (var i 0; i table.rows[0].cells.length; i) {tableHeaders.push(table.rows[0].cells[i].innerHTML);}tableData.push(tableHeaders);for (var i 1; i table.rows.length; i) {var rowData [];for (var j 0; j table.rows[i].cells.length; j) {rowData.push(table.rows[i].cells[j].innerHTML);}tableData.push(rowData);}$.ajax({url: test5.php,type: POST,data: { tableData: JSON.stringify(tableData) },success: function(response) {alert(Data saved successfully!);}});}
/script
/body
/html
使用ajax请求将这个数组传递给名为.php的文件进行处理。 注意你需要自己创建一个.php文件并在其中编写相应的程序来保存数据。
