<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>增删改查</title>
<style type="text/css">
table{
width:100%;
height:2px;
border:#0C9 1px solid;
border-collapse:collapse;
}
</style>
<script type="text/javascript">
function createTable() {
//创建表
var setTable = document.createElement("table");
//设置表的属性
setTable.setAttribute('border', '1');
setTable.setAttribute('id','tableid');
setTable.setAttribute('cellpadding','0');
setTable.setAttribute('cellspacing','0');
setTable.setAttribute('width','100%');
var tbody = document.createElement("tbody");
//创建行
var tr = document.createElement("tr");
//创建单元格
var td1 = document.createElement("td");
//设置单元格的内容
var cellContent1 = document.createTextNode("编号");
var td2 = document.createElement("td");
var cellContent2 = document.createTextNode("标题 ");
var td3 = document.createElement("td");
var cellContent3 = document.createTextNode("摘要");
var td4 = document.createElement("td");
var cellContent4 = document.createTextNode("作者");
var td5 = document.createElement("td");
var cellContent5 = document.createTextNode("类别");
var td6 = document.createElement("td");
var cellContent6 = document.createTextNode("操作");
td1.appendChild(cellContent1);
tr.appendChild(td1);
tbody.appendChild(tr);
td2.appendChild(cellContent2);
tr.appendChild(td2);
tbody.appendChild(tr);
td3.appendChild(cellContent3);
tr.appendChild(td3);
tbody.appendChild(tr);
td4.appendChild(cellContent4);
tr.appendChild(td4);
tbody.appendChild(tr);
td5.appendChild(cellContent5);
tr.appendChild(td5);
tbody.appendChild(tr);
td6.appendChild(cellContent6);
tr.appendChild(td6);
tbody.appendChild(tr);
setTable.appendChild(tbody);
//创建新增按钮
var button = document.createElement("input");
button.type="button";
button.value="新增";
button.id="addBtn";
button.onclick=function(){
trdadd();
}
document.getElementById("tableDiv").appendChild(button);
document.getElementById("tableDiv").appendChild(setTable);
//初始化全局变量table
table = document.getElementById("tableid");
/****************
form表单
****************/
//创建form表单
var form = document.createElement("form");
form.setAttribute("id", "formid");
//创建table
var createFormTable = document.createElement("table");
createFormTable.setAttribute("id", "aaid");
var form_table_tbody = document.createElement("tbody");
var form_table_tr1 = document.createElement("tr");
var form_table_tr2 = document.createElement("tr");
//单元格
var form_table_td1 = document.createElement("td");
form_table_td1.setAttribute("colspan", "6");
var form_table_td2 = document.createElement("td");
form_table_td2.setAttribute("colspan", "6");
//单元格内容
var form_table_td1_text = document.createTextNode("标题:");
var form_table_td2_text = document.createTextNode("摘要:");
//创建标题文本框
var text1 = document.createElement("input");
text1.type="text";
text1.id="aid";
text1.size="30";
//创建摘要文本框
var text2 = document.createElement("input");
text2.type="text";
text2.id="bid";
text2.size="30";
form_table_td1.appendChild(form_table_td1_text);
form_table_td1.appendChild(text1);
form_table_tr1.appendChild(form_table_td1);
form_table_tbody.appendChild(form_table_tr1);
form_table_td2.appendChild(form_table_td2_text);
form_table_td2.appendChild(text2);
form_table_tr1.appendChild(form_table_td2);
form_table_tbody.appendChild(form_table_tr1);
//单元格
var form_table_td3 = document.createElement("td");
form_table_td3.setAttribute("colspan", "6");
var form_table_td4 = document.createElement("td");
form_table_td4.setAttribute("colspan", "6");
//单元格内容
var form_table_td3_text = document.createTextNode("作者:");
var form_table_td4_text = document.createTextNode("类型:");
//创建作者文本框
var text3 = document.createElement("input");
text3.type="text";
text3.id="cid";
text3.size="30";
//创建下拉框
var select = document.createElement("select");
select.id="eid";
select.name="myname";
//创建下拉框option
var option1 = document.createElement("option");
option1.value="1";
var option2 = document.createElement("option");
option1.value="2";
var option3 = document.createElement("option");
option1.value="3";
//下拉框显示的值
var value1 = document.createTextNode("证券");
var value2 = document.createTextNode("体育");
var value3 = document.createTextNode("新闻");
//save按钮
var buttonSave = document.createElement("input");
buttonSave.type="button";
buttonSave.value="保存";
buttonSave.id="saveBtn";
buttonSave.onclick=function(){
baocun();
}
//reset按钮
var buttonReset = document.createElement("input");
buttonReset.type="reset";
buttonReset.value="重置";
buttonReset.id="resetBtn";
buttonReset.onclick=function(){
chongzhi();
}
option1.appendChild(value1);
option2.appendChild(value2);
option3.appendChild(value3);
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
form_table_td3.appendChild(form_table_td3_text);
form_table_td3.appendChild(text3);
form_table_tr2.appendChild(form_table_td3);
form_table_tbody.appendChild(form_table_tr2);
form_table_td4.appendChild(form_table_td4_text);
form_table_td4.appendChild(select);
form_table_tr2.appendChild(form_table_td4);
form_table_tbody.appendChild(form_table_tr2);
createFormTable.appendChild(form_table_tbody);
form.appendChild(createFormTable);
form.appendChild(buttonSave);
form.appendChild(buttonReset);
document.getElementById("fid").appendChild(form);
}
// 新增
function trdadd() {
flag = false;
document.getElementById("fid").style.display = "block"; //控制显示
chongzhi();
document.getElementById("aid").disabled = false; //重新启用
}
//保存
function baocun() {
if (flag == false) {
add(flag);
document.getElementById("fid").style.display = "none";
} else {
add(flag);
document.getElementById("fid").style.display = "none";
}
}
//重置
function chongzhi() {
document.getElementById("formid").reset();
}
//删除
function deleteRow(input) {
var s = input.parentNode.parentNode.rowIndex;
document.getElementById("tableid").deleteRow(s);
var num = document.getElementById("tableid").rows.length;
for ( var i = 1; i < num; i += 1) {
table.rows[i].cells[0].innerHTML = i; //把每行的每一列设为i
}
alert("删除成功!!");
}
</script>
</head>
<body onload="createTable()">
<div id="tableDiv"></div>
<div id="fid" style="display: none"></div>
<script type="text/javascript">
//全局变量
var table = null;
var flag = false;
var getselectrow;
function getNum() {
var haoRow = table.rows[0];
return haoRow.cells.length;
}
//添加方法
function add(flag) {
if (!flag) {
// var num=getNum();
var row = table.insertRow(-1); //为-1时往下加(升序),为0时往上加(id降序)
var add1 = row.insertCell(0);
var add2 = row.insertCell(1);
var add3 = row.insertCell(2);
var add4 = row.insertCell(3);
var add5 = row.insertCell(4);
var add6 = row.insertCell(5);
add1.innerHTML = document.getElementById("tableid").rows.length - 1;//不加-1时id从二开始;原因:标题占一个
add2.innerHTML = document.getElementById("aid").value;
add3.innerHTML = document.getElementById("bid").value;
add4.innerHTML = document.getElementById("cid").value;
var tall = document.getElementById("eid");
var index = tall.selectedIndex;// 当前坐标
var option = tall.options[index];
add5.innerHTML = option.text;
add6.innerHTML = "<input type='button' value='修改' onclick='updateRow(this)'> <input type='button' value='删除' onclick='deleteRow(this)'>";
//alert(num);
alert("添加成功!!");
} else {
var row2 = table.rows[getselectrow];//选中当前行
//把修改后的值设置到对应的文本框中
row2.cells[1].innerHTML = document.getElementById("aid").value;
row2.cells[2].innerHTML = document.getElementById("bid").value;
row2.cells[3].innerHTML = document.getElementById("cid").value;
var pall = document.getElementById("eid");
var index = pall.selectedIndex; //当前坐标
var option = pall.options[index];
row2.cells[4].innerHTML = option.text;
alert("修改成功!!");
}
}
//修改
function updateRow(input) {
flag = true
document.getElementById("aid").disabled = true; //不能启用
document.getElementById("fid").style.display = "block";
var i = input.parentNode.parentNode.rowIndex;
getselectrow = i;
//得到选中行的内容放到文本框
document.getElementById("aid").value = table.rows[i].cells[1].innerHTML;
document.getElementById("bid").value = table.rows[i].cells[2].innerHTML;
document.getElementById("cid").value = table.rows[i].cells[3].innerHTML;
var select = document.getElementById("eid");
var index = select.selectedIndex;// 当前坐标
var option = select.options[index];
option.text = table.rows[i].cells[4].innerHTML;
}
</script>
</body>
</html>
分享到:
相关推荐
"vue表格增删改查"这个主题,是Vue.js应用中的一个常见场景,通常涉及到数据展示、用户交互以及后端通信等多个方面。在这个项目中,我们将深入探讨Vue.js如何实现表格的动态渲染、数据操作和用户界面的实时更新。 ...
在 IT 领域,"表格增删改查"是常见的功能需求,用于管理数据库中的数据。EasyUI 提供了内置的支持,使得这一过程变得简单易行。 在这个“easyui 表格增删改查工具类”中,我们可以期待找到一些实用的代码示例和辅助...
在本项目中,LayUI用于构建用户界面,提供表格、按钮、表单等元素,使得用户能够直观地进行学生信息的增删改查操作。LayUI的响应式设计也确保了在不同设备上的良好用户体验。 **Thymeleaf** Thymeleaf是一个现代...
这个DEMO是针对GWT的增删改查功能的一个实例,非常适合初学者进行学习和实践。 在Web应用开发中,增删改查(CRUD,Create、Read、Update、Delete)是最基本的操作,几乎所有的数据管理界面都会涉及到这些功能。GWT...
为了实现增删改查功能,我们需要定义相应的JavaScript函数。例如,`addRow()`用于添加新数据,`deleteRow(index)`用于删除指定索引的数据,`editRow(index)`用于编辑指定索引的数据。在编辑操作中,我们可以弹出一个...
总结,"js+html+json增删改查带验证"项目是一个综合性的前端开发实践,涵盖了JavaScript编程、HTML页面构建、JSON数据处理以及用户输入验证等多个重要知识点。通过这样的项目,开发者可以提升对前端数据管理的理解,...
本文将深入探讨如何使用这两者来实现表格的动态增删改查以及表单验证,这对于前端开发人员来说是必备技能。 首先,HTML(HyperText Markup Language)是网页内容的基础结构,而JavaScript则负责赋予这些内容动态...
它提供了丰富的组件,如表格、下拉菜单、按钮、对话框等,使得开发者能够快速构建用户界面,尤其是对于增删改查(CRUD)操作的页面。在这个项目中,我们看到使用了 Maven 作为构建工具,SpringMVC 作为后端 MVC 框架...
在这个系统中,JS可能用于实现增删改查的逻辑,如添加新工人信息,删除选定的工人,修改现有信息,并在前端即时反馈这些变化。 4. jQuery库:jQuery是一个广泛使用的JS库,简化了DOM操作、事件处理和动画等功能。在...
在本项目中,我们利用Python的Web框架Django和前端组件库layui来构建一个功能完备的Web应用,...通过以上各个组件的配合,我们可以构建出一个功能完善的Web应用,用户可以通过界面方便地对文章数据进行增删改查操作。
在本文中,我们将深入探讨如何使用Servlet、JSP和Ajax技术实现一个完整的增删改查(CRUD)功能以及分页。Servlet是Java Web应用程序的一部分,用于处理客户端请求和响应。JSP则是一种动态网页技术,它允许在服务器端...
在本项目中,"php图书管理系统实现增删改查"是一个基于PHP开发的简单图书管理应用,旨在帮助用户轻松地管理图书数据,包括添加新图书、删除现有图书、修改图书信息以及查询图书详情。这个系统对于初学者来说,是理解...
本项目"一个页面实现Ajax效果的增删改查-JQuery+Json版"正是利用了这一技术,结合jQuery库和JSON数据格式,为用户提供了一个在一个页面上完成数据增、删、改、查功能的示例。 **jQuery** 是一个轻量级的JavaScript...
本项目"表格增删改查.zip"是利用JavaScript的DOM(Document Object Model)操作和事件绑定功能,实现了一个学生信息管理的表格应用。下面将详细解释其中涉及的技术点和实现过程。 1. **DOM操作**:DOM是HTML和XML...
本教程将详细阐述如何利用Spring Boot结合Thymeleaf实现数据的增删改查操作。 首先,Spring Boot是Spring框架的一个轻量级扩展,它简化了配置并提供了快速开发新项目的能力。它内置了Tomcat服务器,使得开发者可以...
知识点:使用JSP实现数据库操作——增删改查 在Web开发中,使用JSP(Java Server Pages)来实现对数据库的操作是一种常见的实践,尤其是在早期的Web应用开发中。JSP允许开发者在HTML页面中嵌入Java代码,从而实现...
【标题】"maven+ssm简单的增删改查实例"是基于Java Web开发的一个典型应用,它结合了Maven项目构建工具、Spring框架、Struts2(或Spring MVC)和MyBatis数据访问层技术,实现了对数据库的常规操作,如添加(Add)、...
通过以上步骤,你就可以利用JQuery EasyUI和JSON数据格式创建一个功能完善的增删改查界面。同时,EasyUI的其他组件,如`dialog`、`form`等,也可以辅助实现这些功能,让用户体验更加流畅。记住,良好的前端设计不仅...
在这个项目中,我们探讨的是如何在Java环境中,利用JSP(JavaServer Pages)和Servlet技术构建一个可视化的树形结构,并实现增删改查及刷新等基本功能。以下是对这个项目的详细解释: 1. **树形结构基础**: - 树...
总的来说,通过结合Vue.js的组件化特性与plop的自动化生成能力,我们可以快速构建出具有查询、增删改查功能的表格页面,大大提高了开发效率。这只是一个基础示例,实际项目中可能还需要考虑错误处理、数据格式化、UI...