转自CSDN:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>表格记录增删改查</title>

    <style type="javaScript">

       tr{

         text-align:center;

       }

    </style>

    <script type="text/javascript">

       //通过新增按钮来控制表格的显示与隐藏

       var optionFlag = "save";

       var updateRowIndex = -;

       var checkFlag=false;//默认为不显示

       function show() {

         optionFlag = "save";

         var f = document.getElementById("did");//获得id为did的 div

           if(!checkFlag) {

              f.style.visibility="visible";

           }else{

              f.style.visibility="hidden";

           }

           checkFlag=!checkFlag;

       }

       //通过保存按钮将数据添加到表格中

       function insertRow_() {

         switch(optionFlag) {

            case "save" :

               insertRow_$save();

               break;

            case "update" :

               insertRow_$update();

               break;

            default :

               alert("操作失败！！");

         }

         function insertRow_$save() {

            //通过id获得要添加数据的表格

          var table = document.getElementById("tableid");

          //将所输入的内容赋给定义的变量

          var titleName = document.getElementById("title").value;

          var digestName = document.getElementById("digest").value;

          var authorName = document.getElementById("author").value;

          //获取下拉框内的内容

          var selectIndex_ = document.getElementById("select");

          var option = selectIndex_.options[selectIndex_.selectedIndex];

          var selectName = option.text;

          //获取编号的内容

          var numberid = table.rows.length;

          //在表尾添加一行数据

          var row_ = table.insertRow(table.rows.length);

          row_.insertCell().innerHTML = numberid;

          row_.insertCell().innerHTML = titleName;

          row_.insertCell().innerHTML = digestName;

          row_.insertCell().innerHTML = authorName;

          row_.insertCell().innerHTML = selectName;

          row_.insertCell().innerHTML = '<input type="button" value="修改" onclick="update_(this.parentNode.parentNode)"></input>&nbsp;<input type="button" value="删除" onclick="delete_(this.parentNode.parentNode)"></input>';

          document.getElementById("title").value = "";

          document.getElementById("digest").value = "";

          document.getElementById("author").value = "";

          document.getElementById("select").options[].selected="true";

          var f = document.getElementById("did");

          f.style.visibility="hidden";

          alert("insert数据成功！！");

         }

         //修改后的保存

         var tr;

         function insertRow_$update() {

             var table = document.getElementById("tableid");

             tr = table.rows[updateRowIndex];

             var p = document.getElementById("title");

             tr.cells[].innerHTML = p.value;

             p = document.getElementById("digest");

             tr.cells[].innerHTML = p.value;

             p = document.getElementById("author");

             tr.cells[].innerHTML = p.value;

             p = document.getElementById("select");

             var Index_ = p.selectedIndex;

             var option = p.options[Index_];

             var selectName = option.text;

             tr.cells[].innerHTML = selectName;

             document.getElementById("title").value = "";

          document.getElementById("digest").value = "";

          document.getElementById("author").value = "";

          document.getElementById("select").options[].selected="true";

             var f = document.getElementById("did");

             f.style.visibility="hidden";

             alert("update数据成功！！");

         }

       }

       //通过删除按钮  删除当前所在行

       function delete_(row_) {

         var table = document.getElementById("tableid");

         table.deleteRow(row_.rowIndex);

         refurbish_();

         alert("delete数据成功！！");

       }

       //刷新

       function refurbish_() {

         var table = document.getElementById("tableid");

         //获得table的行数

         var rows = table.rows;

         for(var i=;i<rows.length;i++) {

           rows[i].cells[].innerHTML = i;

         }

       }

       //通修改按钮对table里的数据进行修改

       function update_(row) {

         updateRowIndex = row.rowIndex;

         optionFlag = "update";

         //对table里的数据进行回显

         document.getElementById("title").value = row.cells[].innerHTML;

         document.getElementById("digest").value = row.cells[].innerHTML;

         document.getElementById("author").value = row.cells[].innerHTML;

         var selectText = row.cells[].innerHTML;

         var sel = document.getElementById("select");

         var ops = sel.options;

         for(var i=;i<ops.length;i++) {

            if(selectText==ops[i].text) {

               sel.options[i].selected = "true";

            }

         }

         var f = document.getElementById("did");

         f.style.visibility="visible";

       }

    </script>

  </head>

  <body>

    <input type="button" value="新增" onclick="show()"></input>

    <div>

      <table border = "" cellspacing = "" id="tableid"  width="90%">

         <tr bgcolor="yellow">

            <th>编号</th>

            <th>名称</th>

            <th>代码</th>

            <th>机构</th>

            <th>类别</th>

            <th>操作</th>

         </tr>

         <tr>

            <td></td>

            <td>民生宝</td>

            <td></td>

            <td>ms</td>

            <td>基金</td>

            <td>

               <input type="button" value="修改" onclick="update_(this.parentNode.parentNode)"></input>

               <input type="button" value="删除" onclick="delete_(this.parentNode.parentNode)"></input>

            </td>

         </tr>

     </table>

    </div>

 <br>

    <div align="center" id="did" style="visibility:hidden">

       <form action="">

         <table>

          <tr>

      <td>标题：</td>

      <td><input type="text" id="title"></input></td>

      <td>摘要：</td>

      <td><input type="text" id="digest"></input></td>

    </tr>

    <tr>

      <td>作者：</td>

      <td><input type="text" id="author"></input></td>

      <td>类别：</td>

      <td align="left">

       <select id="select">

          <option>证劵</option>

          <option>基金</option>

          <option>股票</option>

       </select>

      </td>

    </tr>

   </table>

   <br>

      <center>

         <input type="button" value="保存" onclick="insertRow_()"></input>

         <input type="reset" value="重置"></input>

      </center>

      </form>

   </div>

 </body>

</html>

(网页)javaScript增删改查(转)的更多相关文章

  1. SSM整合_年轻人的第一个增删改查_新增

    写在前面 SSM整合_年轻人的第一个增删改查_基础环境搭建 SSM整合_年轻人的第一个增删改查_查找 SSM整合_年轻人的第一个增删改查_新增 SSM整合_年轻人的第一个增删改查_修改 SSM整合_年 ...

  2. 招新系统（jsp+servlet，实现简略前端网页注册登录+后台增删改查，分学生和管理员，Java语言，mysql数据库连接，tomcat服务器）

    生活不只是眼前的苟且,还有诗和远方. 架构说明: 要求是采用MVC模式,所以分了下面的几个包,但是由于是第一次写,可能分的也不是很清楚: 这个是后台部分的架构: 这个是前端的的展示: (那个StuLo ...

  3. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  4. JavaScript HTML DOM增删改查

    首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...

  5. javaScript实现增删改查

    自己写的一个html+javaScript实现增删改查小实例.下面是js代码​1. [代码][JavaScript]代码   //1.创建受捐单位数组var arrOrgData = [    { & ...

  6. javascript相关的增删改查以及this的理解

    前两天做了一个有关表单增删改查的例子,现在贴出来.主要是想好好说一下this. 下面贴一张我要做的表格效果. 就是实现简单的一个增删改查. 1.点击增加后自动增加一行: 2.点击保存当前行会将属性改成 ...

  7. JavaScript之DOM的增删改查

    JavaScript的组成: 1. ECMAScript-语法规范 2. Web APIs(浏览器提供的工具) (1).BOM (浏览器对象模型) (2).DOM (文档对象模型) 今天就来讲讲DOM ...

  8. 用 JS（JavaScript ）实现增删改查

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现简单增删改查 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HT ...

  9. JavaScript（JS）之Javascript对象DOM之增删改查（四）

    创建节点:var ele_a = document.createElement('a');添加节点:ele_parent.appendChild(ele_img);删除节点:ele_parent.re ...

随机推荐

  1. Tools - Vim

    Vim 简明 Vim 练级攻略 基础设置 在vim界面点击":"然后进行设置,但只会在当前vim界面生效: 添加相关设置在vim配置文件(例如"/etc/vimrc&qu ...

  2. Testing - 软件测试知识梳理 - 测试分类

    参考信息 软件测试分类 经典软件测试技术分类 软件测试方法汇总 简洁分类 对软件内部结构的深入程度 黑盒测试:又叫功能测试.数据驱动测试或基于需求规格说明书的功能测试. 该测试类别注重于测试软件的功能 ...

  3. 机器学习基石笔记：07 The VC Dimension

    当N大于等于2,k大于等于3时, 易得:mH(N)被Nk-1给bound住. VC维:最小断点值-1/H能shatter的最大k值. 这里的k指的是存在k个输入能被H给shatter,不是任意k个输入 ...

  4. 排序算法系列：插入排序算法JAVA版（靠谱、清晰、真实、可用、不罗嗦版）

    在网上搜索算法的博客,发现一个比较悲剧的现象非常普遍: 原理讲不清,混乱 啰嗦 图和文对不上 不可用,甚至代码还出错 我总结一个清晰不罗嗦版: 原理: 和选择排序类似的是也分成“已排序”部分,和“未排 ...

  5. Eruda 一个被人遗忘的调试神器

    Eruda 一个被人遗忘的调试神器 引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...

  6. python之斐波那契数列递归推导在性能方面的反思

    在各种语言中,谈到递归首当其冲的是斐波那契数列,太典型了,简直就是标杆 一开始本人在学习递归也是如此,因为太符合逻辑了 后台在工作和学习中,不断反思递归真的就好嘛? 首先递归需要从后往前推导,所有数据 ...

  7. Java NIO中的通道Channel（二）分散/聚集 Scatter/Gather

    什么是Scatter/Gather scatter/gather指的在多个缓冲区上实现一个简单的I/O操作,比如从通道中读取数据到多个缓冲区,或从多个缓冲区中写入数据到通道: scatter(分散): ...

  8. zookeeper ZAB协议 Follower和leader源码分析

    Follower处理逻辑 void followLeader() throws InterruptedException { //... try { //获取leader server QuorumS ...

  9. 红黑树深入剖析及Java实现

    红黑树是平衡二叉查找树的一种.为了深入理解红黑树,我们需要从二叉查找树开始讲起. BST 二叉查找树(Binary Search Tree,简称BST)是一棵二叉树,它的左子节点的值比父节点的值要小, ...

  10. php生成mysql数据字典

    <?php /** * 生成mysql数据字典 */ // 配置数据库 $database = array(); $database['DB_HOST'] = '127.0.0.1'; $dat ...