前端创建动态表格，实现表格数据的增删改查
2018-05-12 15:17
260 查看
创建一个包含数据库基本字段的表格
html表格代码示例
<div class="ibox-content col-md-12" style="padding-top: 0px; border: 0px; height: 100%; width: 100%">
<table class="table" id="filedTable">
<tr>
<td width="32" align="center" bgcolor="#EFEFEF" Name="check">
<input type="checkbox" name="checkbox" value="checkbox" />
</td>
<td width="162" bgcolor="#EFEFEF" Name="columnname" EditType="TextBox">列名</td>
<td width="112" bgcolor="#EFEFEF" Name="datatype" EditType="DropDownList"
DataItems="{text:'int',value:'int'},{text:'varchar',value:'varchar'},{text:'datetime',value:'datetime'},{text:'longblob',value:'longblob'}">数据类型</td>
<td width="172" bgcolor="#EFEFEF" Name="length" EditType="TextBox">长度</td>
<td width="112" bgcolor="#EFEFEF" Name="primarykey" EditType="DropDownList"
DataItems="{text:'true',value:'true'},{text:'false',value:'false'}">主键</td>
<td width="112" bgcolor="#EFEFEF" Name="notnull" EditType="DropDownList"
DataItems="{text:'true',value:'true'},{text:'false',value:'false'}">非空</td>
<td width="206" bgcolor="#EFEFEF" Name="comments" EditType="TextBox">注释</td>
</tr>
</table>
<br />
<input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('filedTable'))" />
<input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('filedTable'))" />
</div>JS代码如下 //表格添加行
function AddRow(table) {
var lastRow = table.rows[table.rows.length - 1];
var newRow = lastRow.cloneNode(true);
var length = table.rows.length;
table.tBodies[0].appendChild(newRow);
newRow.cells[0].innerHTML = "<input type=\"checkbox\" name=\"checkbox\" value=\"checkbox\">";
newRow.cells[0].setAttribute("id","new");
newRow.cells[1].innerHTML = "example"
newRow.cells[2].innerHTML = "varchar"
newRow.cells[2].setAttribute("value","varchar");
newRow.cells[3].innerHTML = "10"
newRow.cells[4].innerHTML = "false"
newRow.cells[4].setAttribute("value","false");
newRow.cells[5].innerHTML = "false"
newRow.cells[5].setAttribute("value","false");
newRow.cells[6].innerHTML = ""
//根据行号奇偶设置不同背景色
if(length%2 == 1){
newRow.cells[0].setAttribute("bgcolor","#FFFFFF");
newRow.cells[1].setAttribute("bgcolor","#FFFFFF");
newRow.cells[2].setAttribute("bgcolor","#FFFFFF");
newRow.cells[3].setAttribute("bgcolor","#FFFFFF");
newRow.cells[4].setAttribute("bgcolor","#FFFFFF");
newRow.cells[5].setAttribute("bgcolor","#FFFFFF");
newRow.cells[6].setAttribute("bgcolor","#FFFFFF");
}else{
newRow.cells[0].setAttribute("bgcolor","#f2fbff");
newRow.cells[1].setAttribute("bgcolor","#f2fbff");
newRow.cells[2].setAttribute("bgcolor","#f2fbff");
newRow.cells[3].setAttribute("bgcolor","#f2fbff");
newRow.cells[4].setAttribute("bgcolor","#f2fbff");
newRow.cells[5].setAttribute("bgcolor","#f2fbff");
newRow.cells[6].setAttribute("bgcolor","#f2fbff");
}
//设置表格行可编辑
SetRowCanEdit(newRow);
return newRow;
} //设置表格行可编辑
function SetRowCanEdit(row) {
for (var i = 0; i < row.cells.length; i++) {
//当前单元格指定了编辑类型，允许编辑
var editType = row.cells[i].getAttribute("EditType"); if (!editType) {
//当前单元格没有指定，查看当前列是否指定
editType = row.parentNode.rows[0].cells[i].getAttribute("EditType"); }
if (editType) {
row.cells[i].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) {
//编辑状态，true为编辑状态
var editState = element.getAttribute("EditState");
if (editState != "true") {
//创建文本框
var textBox = document.createElement("INPUT");
textBox.style="width:100%";
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) {
//编辑状态， true为编辑状态
var editState = element.getAttribute("EditState");
if (editState != "true") {
//创建下拉框
var downList = document.createElement("Select");
downList.style="width:100%";
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);
}
}
//取消单元格编辑状态
function CancelEditCell(element, value, text) {
element.setAttribute("Value", value);
if (text) {
element.innerHTML = text;
} else {
element.innerHTML = value;
} element.setAttribute("EditState", "false");
}
//清空指定对象的所有字节点
function ClearChild(element) {
element.innerHTML = "";
}
//删除行
function DeleteRow(table) {
for (var i = table.rows.length - 1; i > 0; i--) {
var chkOrder = table.rows[i].cells[0].firstChild;
if (chkOrder) {
if (chkOrder.type = "CHECKBOX") {
if (chkOrder.checked) {
table.deleteRow(i);
}
}
}
}
}
//提取表格所有值,JSON格式，可以将该值赋予一个隐藏的input标签，提交表单至后台进行处理
function GetTableData() {
var table = document.getElementById("filedTable");
var Obj = {Mark:"",Columnname:"",Datatype:"",Length:"",Primarykey:"",Isnull:"",Comments:""};
var datamodeldata = JSON.parse("{\"data\":[]}");
for(var i=1;i<table.rows.length;i++){
var Obj = new Object();
Obj.Mark = table.rows[i].cells[0].id;
Obj.Columnname = table.rows[i].cells[1].innerHTML;
Obj.Datatype = table.rows[i].cells[2].innerHTML;
Obj.Length = table.rows[i].cells[3].innerHTML;
Obj.Primarykey = table.rows[i].cells[4].innerHTML;
Obj.Isnull = table.rows[i].cells[5].innerHTML;
Obj.Comments = table.rows[i].cells[6].innerHTML;
datamodeldata.data.push(Obj);
}
return JSON.stringify(datamodeldata).toString();
}
//本表格数据为数据库字段数据
//判断字段名称是否重复
function ColumnnameDuplicate(){
var table = document.getElementById("filedTable");
var array = new Array();
var b = false;
for(var i=1;i<table.rows.length;i++){
array.push(table.rows[i].cells[1].innerHTML);
}
var nary=array.sort();
for(var i=0;i<array.length;i++){
if (nary[i]==nary[i+1]){
b = true;
}
}
return b;
}
//提交表格时，判断是否存在数据行
function TableRows(){
var table = document.getElementById("filedTable");
var length = table.rows.length;
var b = false;
if(length>=2){
b=true;
}
return b;
}
//判断字段名称是否为空
function ColumunameIsnull(){
var table = document.getElementById("filedTable");
var b = false;
for(var i=1;i<table.rows.length;i++){
if(table.rows[i].cells[1].innerHTML==""){
b = true;
}
}
return b;
} 上述数据为数据库创建数据表时所需要的一些基本数据，除上述代码外，我们可以增加几个input标签，用来存储数据表名称、数据表执行器等。最后利用form提交的方式传递给后台。在后台根据数据完成创建数据表的功能。阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js 动态表格 可以实现增删改查数据
- 关于jquery实现动态创建表格和动态显示数据的问题？
- 动态创建的表格单元格中的事件实现代码
- ThinkPHP定时ajax获取后台数据，使用javascript动态修改前端页面的表格来显示数据
- JS实现table表格数据排序(可支持动态数据+分页效果)
- 使用jQuery动态创建一个表格，根据用户数输入的内容添加一行数据
- 动态创建的表格单元格中的事件实现代码
- 在MVC中动态读取JSON数据创建表格
- 【SQL server】创建零时表格，实现数据的分析
- javascript 实现动态创建Form发送数据
- javascript动态创建表格及添加数据实例详解
- 动态创建表格js文件,javascript，Ajax，DHTML动态实现表格的创建，动态读取XML中的文件，读取dom节点的例子。
- 使用Python创建MySQL数据库实现字段动态增加以及动态的插入数据
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- 用两个for循环实现动态创建表格和实现乘法口诀表
- JQuery将DataTable list<>数据转换成JSON数据 动态创建表格显示数据
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- 应用jQuery实现表格数据的动态添加与统计
- 基于Ado.net Entity Framework 通过系统运行时动态编译实现数据表字段的增删