`

JS 动态增加删除表格

J#ASPJavaScriptCC++ 
阅读更多
 <HTML>   
  <HEAD>   
  <script   language="javascript">   
    
    
  //--------------------------删除行开始--------------------------------------   
  function   DeleteRow(obj){   
  //删除行   
  //index插入的位置   
  alert("Table1的行数:"+obj.rows.length+"\n"+"Table1的列数:"+obj.rows(0).cells.length);   
  if(obj.rows.length>1)   
  {   
  obj.deleteRow(obj.rows.length-1);   
  }   
    
  }   
  //--------------------------删除行结束--------------------------------------   
    
  //--------------------------插入行开始--------------------------------------   
  function   InsertRow(obj){   
  //插入行   
  //index插入的位置   
  alert("Table1的行数:"+obj.rows.length+"\n"+"Table1的列数:"+obj.rows(0).cells.length);   
  var   oTr=obj.insertRow(obj.rows.length);   
  oTr.style.height=21   
  var   oTd   
  for   (j=0;j<obj.rows(0).cells.length;j++)   
  {   
  oTd=oTr.insertCell(j)   
  oTd.innerText="   "       //"   "   
  }   
    
  }   
  //--------------------------插入行结束--------------------------------------   
    
    
  //--------------------------插入列开始--------------------------------------   
  function   InsertCol(obj){   
  var   oTd   
  for(j=0;j<obj.rows.length;j++){   
    
  oTd=obj.rows(j).insertCell(obj.rows(j).cells.length);   
  oTd.innerText="   "       //"   "   
  }   
  }   
  //--------------------------插入列结束--------------------------------------   
    
  //--------------------------删除列开始--------------------------------------   
  function   DeleteCol(obj){   
  alert(Table1.rows(0).cells.length);   
  for(j=0;j<Table1.rows.length;j++)   
  {   
  if(Table1.rows(j).cells.length>1)   
  {   
  Table1.rows(j).deleteCell(Table1.rows(j).cells.length-1);   
  }   
  }   
  }   
  //--------------------------删除列结束--------------------------------------   
    
  //--------------------------更改表格文字开始--------------------------------------   
  function   showinput()   
  {   
  elm   =   event.srcElement;   
  if   (elm.tagName   !=   "TD")   return;   
  elm.innerHTML   =   "<input   onblur='hide()'     value='"+elm.innerText+"'   style='text-align:center;width:100%;border-width:   0px;'   name='input1'   id='input1'></input>";   
  document.all.item("input1").focus();   
  document.all.item("input1").select();   
  }   
  function   hide()   
  {   
  elm   =   event.srcElement;   
  elm.parentNode.innerHTML   =   elm.value   
  }   
  //--------------------------更改表格文字结束--------------------------------------   
  //function   document.onmousedown(){   
  // alert(event.keyCode);   
  //}   
    
  </script>   
  <TITLE>Lion互动网络=》动态添加修改表格（行、列、内容）</TITLE>   
  </HEAD>   
  <BODY>   
  <INPUT   onclick="DeleteRow(Table1)"   type="button"   value="删除行"   ID="Button1"   NAME="Button1">&nbsp;<INPUT   onclick="InsertRow(Table1)"   type="button"   value="插入行"   ID="Button2"   NAME="Button2"><BR>   
  <INPUT   onclick="DeleteCol(Table1)"   type="button"   value="删除列"   ID="Button3"   NAME="Button3">&nbsp;<INPUT   onclick="InsertCol(Table1)"   type="button"   value="插入列"   ID="Button4"   NAME="Button4"></P>   
  <P><asp:datagrid   id="ID_Grid"   onclick="showinput()"   runat="server"   Width="100%"   AutoGenerateColumns="False"></asp:datagrid>Table1:   
  <TABLE   id="Table1"   onclick="showinput()"   cellSpacing="1"   cellPadding="1"   width="300"   border="1">   
  <TR>   
  <TD>d</TD>   
  <TD>c</TD>   
  <TD>a</TD>   
  </TR>   
  <TR>   
  <TD>a</TD>   
  <TD>b</TD>   
  <TD>c</TD>   
  </TR>   
  </TABLE>   
  </BODY>   
  </HTML> 
分享到：
| JS 增加删除行
评论
发表评论

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

相关推荐

    JS动态增加删除表格行

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

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`&lt;table&gt;`元素用于创建...

    js动态添加删除表格

    在JavaScript中，动态添加和删除表格是常见的网页交互功能，主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例，展示了如何利用JavaScript实现这个功能。在讲解之前，我们先了解一下HTML表格的基本...

    js 添加删除表格

    在JavaScript中，添加和删除表格是常见的操作，特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能，并提供一个简单的源码示例。首先，我们需要理解HTML表格的基本结构，然后利用...

    动态添加js,动态添加表格和删除表格,批量添加记录，批量添加

    动态添加js,动态添加表格和删除表格,批量添加记录，批量添加

    动态添加删除表!格动态添加删除表格!

    在IT领域，尤其是在网页开发和用户界面设计中，动态添加删除表格是一项常用的技术。它允许用户根据需求在界面上自由地增加或减少表格行或列，提高了交互性和用户体验。本篇将深入探讨这一主题，主要关注如何实现这个...

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

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

    jquery 动态增加删除表格. 实例

    本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`&lt;table&gt;`元素定义，每一行由`&lt;tr&gt;`元素...

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

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

    纯javascript增加删除表格行

    3. **删除行**：删除表格行通常涉及到选择要删除的行，并调用`removeChild()`方法。例如，假设我们想删除点击时的当前行，可以这样实现： ```javascript function deleteRow(event) { if (confirm('确定要删除...

    js动态增加表格行

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

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

    总的来说，这个压缩包提供了一个实用的示例，帮助开发者了解如何在Vue.js中实现动态表格，并添加删除修改功能。这不仅适用于学习Vue.js基础，还对提升实际项目开发能力有所帮助。通过研究这个代码，你可以深入理解...

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

    本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...

    几种经典的jQuery动态增加删除表格的实例

    本篇文章将详细探讨几种经典的jQuery动态增加删除表格的实例，同时也将涵盖一种使用原生JavaScript实现的方法。 首先，jQuery动态增加表格行通常涉及以下几个步骤： 1. **创建HTML结构**：一个基本的表格由`...

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

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

    javascript实现动态添加删除表格行

    NULL 博文链接：https://1148130696.iteye.com/blog/1726191

    vue动态添加删除表格数据代码

    以上就是基于Vue.js的动态添加删除表格数据的基本实现。这个项目提供了一个直观的示例，展示了如何在前端利用Vue的数据驱动特性和Bootstrap的样式创建一个用户友好的管理界面。通过学习和实践这个例子，开发者可以更...

    javascript动态添加表格数据行

    在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...

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