`
pcajax
  • 浏览: 2158967 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js 为表格增加行 动态

JavaScriptHTML 
阅读更多
 
 
 
<html>  
   
  <head>  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
  <title>JK:支持民族工业,尽量少买X货</title>  
   
  <style>  
  TD,INPUT{ font-size:12; }  
  </style>  
  </head>  
   
  <body   bgcolor=EEEEEE>  
  <form   name="frm"   action="about:结果页面"   method=post   >  
  <h4   align=center>JK的动态明细示例</h4>  
   
  <table   align="center"   bordercolor=cccccc   border=1     width=100%   >  
  <tr>  
  <td   width=500>  
  </td>  
  <td   align=right>  
              <input   type="button"     value="增加"   class="bottom"   onclick="addDetailProcess();">&nbsp;            
              <input   type="button"     value="删除"   class="bottom"   onclick="delDetailProcess();">&nbsp;            
              <input   type="button"     value="完成"   class="bottom"   onclick="submitProcess();">  
               
  </td>  
  </tr>  
  </table>  
  <div   width=100%   id=thedetailtableDIV>  
  <table   align="center"   bordercolor=cccccc   border=1   width=100%   >  
      <tr   bgcolor=eeeeee   id="trDetailTitles">    
          <td   ><input   type=checkbox   onclick="selectallcheckbox(this)"></td>  
          <td   >明细ID*</td>  
          <td   >明细NAME</td>  
      </tr>  
      <tbody   id="tbDetailUsed"   >  
  <tr>  
  <td   ><input   type="checkbox"   name="record_select"   ></td>  
  <td   ><input   type="text"   name="detail_id"   value=''   ></td>  
  <td   ><input   type="text"   name="detail_name"   value=''   ></td>  
  </tr>  
   
  <tr   height=0   ><td   colspan=100   height=0   >   合计</td></tr>  
      </tbody>    
   
  </table>  
  </div>  
  </form>  
   
  <!--复制的内容-->  
  <table   id="tbDetailPrepare"   style="display:none">  
  <tr>  
  <td   ><input   type="checkbox"   name="record_select"   ></td>  
  <td   ><input   type="text"   name="detail_id"   value=''   ></td>  
  <td   ><input   type="text"   name="detail_name"   value=''   ></td>  
  </tr>  
  </table>  
   
   
  <input   name="theHistoryRecord"   type=hidden   value="">  
  </body>  
   
  </html>  
   
  <script   language=javascript>  
   
  window.onload   =   historyOncemore;  
  window.onbeforeunload   =   fixHistory;  
   
  function   fixHistory() //记住历史  
  {  
  document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(/\n/g,"");  
  }  
   
  function   historyOncemore() //恢复历史  
  {  
   
  if   (document.all("theHistoryRecord").value!="")  
  {
  alert(document.all("theHistoryRecord").value);
  document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value;  
  }  
  }  
   
  function   selectallcheckbox(obj) //全选或全不选  
  {  
  var   tureorfalse=obj.checked;  
  var   theDetail=tbDetailUsed.rows;  
  for(var   i=0;i<theDetail.length-1;i++)  
  {  
  theDetail[i].all("record_select").checked=tureorfalse;  
  }  
  }  
   
   
  function   addDetailProcess(afterRowIndex) //增加明细  
  {  
  var   alltbDetailUsed=   document.all("tbDetailUsed").rows;  
  var   theFirstSelectedDetail;  
  if   (afterRowIndex==null)  
  {  
      theFirstSelectedDetail=alltbDetailUsed.length-2;  
  }  
  else   theFirstSelectedDetail=afterRowIndex;  
  var   newRow   =   document.all("tbDetailPrepare").rows[0].cloneNode(true);  
  var   desRow   =   alltbDetailUsed[theFirstSelectedDetail+1];  
  desRow.parentElement.insertBefore(newRow,desRow   );  
   
  }  
   
  function   delDetailProcess() //删除明细  
  {  
  var   alltbDetailUsed=   document.all("tbDetailUsed").rows;  
  if   (confirm("确定选择正确并且要将这些明细删除")==false)   return   false;  
  for(var   i=0;i<alltbDetailUsed.length-1;i++)  
  {  
  if   (alltbDetailUsed[i].all("record_select").checked==true)  
  {  
  document.all("tbDetailUsed").deleteRow(i);  
  i=i-1;  
  }  
  }  
  }  
   
  function   submitProcess()  
  {  
              document.frm.submit();  
  }  
   
   
  </script>
 
分享到：
| VSS演示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js动态增加表格行

    js增加动态表格，点击增加就增加一行，点击删除就删除一行，每行前面有勾选框，可以勾选，删除多行

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含，其中包含`&lt;tr&gt;`（表格行）元素，每行内可以有多个`&lt;td&gt;`（表格数据单元格）或`...

    表格动态插入行

    本知识点主要探讨如何使用JavaScript（简称JS）来实现表格动态插入行的功能。JavaScript是一种广泛使用的客户端脚本语言，它允许我们对网页进行实时更新和交互，而不需刷新整个页面。 首先，我们需要一个基本的HTML...

    JQuery实现动态表格点击按钮表格增加一行

    在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...

    纯javascript增加删除表格行

    在本主题中，我们将深入探讨如何使用纯JavaScript来实现表格（table）的行增删功能，这对于创建数据管理界面或者用户输入表单的网页特别有用。 首先，我们需要了解HTML中的`&lt;table&gt;`元素。`&lt;table&gt;`是用于展示结构...

    js实现动态增加和删除表格的行和列。实例

    js实现动态增加和删除表格的行和列。实例 js实现动态增加和删除表格的行和列。实例

    自动增加行的动态表格

    1. `main.css`：这应该是主要的CSS文件，包含了表格及其动态行的样式规则。CSS（Cascading Style Sheets）用于定义网页的布局和视觉表现，包括颜色、字体、大小、位置等，对于创建美观且响应式的表格至关重要。 2. `...

    javascript动态操作表格

    在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`&lt;table&gt;`...

    vue.js动态表格增加删除修改代码.zip

    这个"vue.js动态表格增加删除修改代码.zip"文件显然包含了使用Vue.js实现动态表格功能的示例代码。动态表格是网页应用中常见的一种数据展示方式，它允许用户交互地添加、删除和修改数据。 首先，`index.html`文件是...

    js表格操作，DOM实现数据动态增删查改

    通过以上步骤，你可以实现一个基本的基于DOM的JavaScript表格数据操作系统。这个系统可以适应各种数据管理需求，为用户提供直观的界面和流畅的操作体验。在实际项目中，可能还需要处理更复杂的交互逻辑，如表单验证...

    表格行记录动态增加和删除

    这篇博文"表格行记录动态增加和删除"主要探讨了如何在网页应用中实现这一功能，这通常是通过JavaScript、jQuery或者更现代的前端框架如Vue.js、React.js来完成的。下面将详细讲解这一知识点。 首先，我们要理解表格...

    JS对表格的动态增加删除行 （多个demo）

    这篇博客"JS对表格的动态增加删除行 (多个demo)"提供了实用的方法来帮助开发者实现这些功能。以下是对这个主题的详细说明： 1. **HTML表格基础**： HTML表格由`&lt;table&gt;`元素定义，行`&lt;tr&gt;`，列`&lt;td&gt;`（或`&lt;th&gt;`...

    javascript改变表格行的颜色

    在网页开发中，使用JavaScript来动态改变表格行的颜色是一种常见的技术。这种技术不仅可以提升用户体验，还可以增加网站的交互性。本文将详细介绍如何使用JavaScript来实现这一功能，并探讨一些高级用例。 #### 1. ...

    JavaScript 动态表格

    用JavaScript制作的动态表格，有添加、删除、全选、全不选，有对动态新增的域校验问题，有对新增的域设置readonly问题，还有对新增域中的span进行隐藏问题都有解决，还有对动态表格的讲解PPT一份。

    js 动态表格增 删 查 改

    使用JavaScript，我们可以动态地生成和更新表格行 (`&lt;tr&gt;`)、单元格 (`&lt;td&gt;`) 或表头 (`&lt;th&gt;`), 以及与之相关的样式和事件。例如，我们可以通过 `document.createElement()` 创建新元素，再通过 `innerHTML` 或 `...

    原生js可编辑表格实现动态添加表格行数和删除表格行数

    在JavaScript（JS）中，创建一个可编辑的表格并实现动态添加和删除行的功能是一项常见的需求，尤其是在构建数据管理界面时。以下将详细介绍如何利用原生JavaScript实现这一功能。 首先，我们需要在HTML中创建一个...

    js生成动态表格并为每个单元格添加单击事件的方法

    本文介绍的使用JavaScript动态生成表格并为每个单元格添加单击事件的方法是Web开发中一项基础而重要的技能。通过这种方式，我们可以根据实时数据创建表格，并允许用户与表格中的数据进行交互。这不仅使页面变得更加...

    ASP+JS实现表格实时添加行

    这段JS代码首先获取了ID为`dynamicTable`的表格，然后在表格的最后一行插入新行，并对新行的每个单元格添加内容。你可以根据实际需求修改新插入的行和单元格的数据。 此外，`saveInfo.asp`可能是一个ASP文件，用于...

Magicbox
Global site tag (gtag.js) - Google Analytics