`
wlh269
  • 浏览: 458094 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js动态添加和删除一行

JavaJSPHTML 
阅读更多 

<%&#64; page language="java" import="java.util.*,com.page.wash.giveclothing.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>添加表格信息</title>
 <meta http-equiv="pragma" content="no-cache" />
 <meta http-equiv="cache-control" content="no-cache" />
 <meta http-equiv="expires" content="0" />    
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
 <meta http-equiv="description" content="This is my page" />
<script language="javascript" type="text/javascript">  
function AddRow()
{
 //添加一行
 var i =tab1.rows.length;
 var Nam="'div1'";
 var Cod="fuJ"+i;
 var newTr = tab1.insertRow();
 //添加列
 var newTd0 = newTr.insertCell();
 var newTd1 = newTr.insertCell();
 var newTd2 = newTr.insertCell();
 var newTd3 = newTr.insertCell();
 //设置列内容和属性
 newTd0.innerHTML = '<input type="checkbox" id="box1" onClick="GetRow()"/ /><input type="hidden" name="fuJ" id='+Cod+' />'; 
 newTd1.innerHTML = " 衣服尺码";
 newTd2.innerHTML = " 衣服花色";
 newTd3.innerHTML = " 处理类型";
}
function DelRow()
{
//删除一行
  var shu=0;
  var cheCou=document.all("box1");
   for(var i=0;i<cheCou.length;i++)
   {
    if (cheCou[i].checked==true)
    {
      shu++;
    }
   }
   if(shu==cheCou.length)
   {
     alert('最少要添加一件衣服');
     return;
   }
   else  if(shu==0)
   {
     alert('请选择你要删除的信息');
     return;
   }
   else if(shu==1)
   {
     for(var i=0;i<cheCou.length;i++)
     {
       if(cheCou[i].checked==true)
       {
        tab1.deleteRow(i+1);
       }
     }
   }
   else if(shu>1)
   {
     for(var a=0;a<shu;a++)
     {
         for(var i=0;i<cheCou.length;i++)
      {
        if(cheCou[i].checked==true)
        {
         tab1.deleteRow(i+1);
         break;
        }
      }
     }
   }
}
function GetRow()
{
  //获得行索引
  //两个parentElement分别是TD和TR哟，rowIndex是TR的属性
  //this.parentElement.parentElement.rowIndex
  cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex; 
}
</script>
  </head>
  <body>
 <form name="form1" action="${pageContext.request.contextPath}/giveClothing.do?method=FuJiaFei" method="post"   >
 <center>
    <fieldset>
     <legend><strong>动态添加一行表格</strong></legend>
     <input type=hidden id="hid" name="hid"/ />
  <table id="tab1" align="center" border="1" cellPadding="4" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:95%;word-break: break-all">
      <thead>
    <tr>
     <th align="center" width="10%">选择</th>
     <th align="center" width="15%">衣服尺码</th>
     <th align="center" width="15%">衣服花色</th>
     <th align="center" width="15%">处理类别</th>
    </tr>
   </thead>
               <tr >
     <td><input type=checkbox id="box1" onClick="GetRow()" />
         <input type="hidden" name="fuJ" id="fuJ1" />
     </td>   
     <td> 衣服尺码</td>
     <td> 衣服花色</td>
     <td> 处理类别</td>
            </tr>
    
       </table>
       <table  align="center" border="1" cellPadding="4" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:95%;word-break: break-all">
       <tr>
         <td align="right">
       <input type="button" name="Submit" value="增加一行" onclick="javascript:AddRow();" />
          <input type="button" name="Submit" value="删除一行" onclick="javascript:DelRow();" />
         </td> 
      </tr> 
   </table>
</form>
  </body>
  
</html>
分享到：
| 导入导出
评论
发表评论

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

相关推荐

    js动态添加和删除行

    同样，你可以根据需求修改这个示例，比如添加删除行的功能，或者改变单元格的内容和行为。理解这些基本原理后，就能灵活应对各种复杂的交互需求了。在实际项目中，你可能会遇到性能优化、兼容性处理、错误处理等问题...

    js动态添加行和删除行

    在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    以下是对这个"js实现添加删除一行。每一行下面可以再添加一行。序号自动改变"知识点的详细解释： 1. **动态创建DOM元素**： - 在JavaScript中，我们可以通过`document.createElement()`方法来创建新的HTML元素，如...

    JavaScript动态添加删除表格行

    博客"JavaScript动态添加删除表格行"很可能会深入讨论这些技术，并提供实际的代码示例，帮助读者理解和应用这些概念。通过阅读和学习，开发者可以掌握如何在实际项目中实现动态操作HTML表格的功能。

    JS动态添加删除HTML元素(实例)

    JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一，今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先，让我们了解一下 HTML 文档对象模型（DOM），它...

    JS删除或者添加一行的代码

    标签解释：删除添加一行，指的是在网页中通过 JavaScript 动态添加或删除表格行的操作。 部分内容解释： 该代码主要实现了两个功能：动态添加表格行和删除表格行。下面对这两个功能进行详细解释： 动态添加表格行...

    利用jquery给指定的table动态添加一行、删除一行的方法

    2. **删除一行** 删除行的操作可以通过选中对应的行，通常是通过复选框来实现。`delTr`函数接收一个参数，即复选框的名称（ckb）。它首先找到所有被选中的复选框，然后删除它们的父`tr`元素。这通常涉及到遍历所有...

    javascript动态添加一行数据和删除数据

    利用javascript来结合html，可以动态的添加一行数据，和根据索引来删除一行数据。

    动态添加/删除表格行并提交内容到后台

    在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...

    JS动态添加、删除Table行排序（删除整行、删除整列）

    这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行，并实现排序功能，包括删除整行和整列。以下是对这些概念的详细解释： 1. **动态添加Table行：** 要动态添加行，我们可以使用`document....

    table JS 添加行和删除行

    在本话题中，我们将深入探讨如何使用JavaScript来添加和删除HTML表格（table）中的行。这对于构建数据展示或者管理界面非常实用。 首先，让我们了解HTML表格的基本结构。一个简单的HTML表格由`&lt;table&gt;`标签定义，每...

    JS动态增加删除表格行

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

    JS动态增加和删除行

    通过JS实现了动态的增加一行或是删除一行，可以进行多行数据录入。

    js动态添加删除行，实用

    &lt;title&gt;JS 动态添加删除行 姓名 年龄 &lt;!-- 动态添加的数据行将放在这里 --&gt; ()"&gt;添加行 ()"&gt;删除选中行 function addRow() { var table = document.getElementById('myTable'); var ...

    jquery动态添加 删除指定行元素

    在JavaScript和jQuery的世界里，动态地添加和删除DOM元素是常见的需求，特别是在处理表格数据时。本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先，我们来看动态添加行的操作。这个过程通常...

    jquery表格动态添加删除行代码.zip

    总的来说，"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript（主要是jQuery）的示例，它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用，例如在线...

    jstable添加行删除行复制行

    在处理表格（Table）元素时，JavaScript可以帮助我们实现实时的动态操作，比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素。它用于创建表格，...

    Ajax动态表格，可适时添加行、删除行、复制行

    本话题将深入探讨如何实现一个动态表格，用户可以适时添加、删除和复制表格中的行。 首先，我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取或提交数据，然后使用JavaScript处理这些...

    基于JavaScript实现动态添加删除表格的行

    本文将详细介绍如何使用JavaScript实现动态添加和删除表格的行。在实际应用中，这样的功能常见于数据输入表单或者管理界面，用户可以根据需求增删表格行，方便数据的管理。 首先，我们来看HTML部分。一个简单的表格...

    js 添加删除表格

    以下是一个简单的例子，展示如何使用JavaScript添加和删除表格行： ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...

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