`

动态增加 删除table行 列等

HTMLXHTML 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">

          //使用clone方式来生成一行，targetTable是需要添加行的table的ID，sourceTable是clone对象

         //talbe的ID，即复制sourceTable的第一行插入到targetTable中，完成增加行的操作

         function insertRow(targetTable,sourceTable)

         {

           var oTBODY     = document.getElementById(targetTable).tBodies.item(0);

           var oTBODYData = document.getElementById(sourceTable).tBodies.item(0);

           var rowsCount = oTBODYData.rows.length;

           for(var i=0;i<rowsCount;i++){

             oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));

           }

         }

        

        function deleteRow(Field,targetTable){

              var findex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的

              document.getElementById(targetTable).deleteRow(findex);

         }

              

           //  查询出将要删除的行所在的位置index

           function getElementOrder(field){

               var i = 0;

               var order = 0;

               var elements = document.getElementsByName(field.name);

               for(i=0;i<elements.length;i++){

                   order++;

                   if(elements[i]==field){

                       break;

                   }

               }

               return order;

           }

       </script>
</head>

<body>
<table id = "sourceTable" style="display:none;">

           <tr>

              <td><input type="text" name="username"></td>

              <td><input type="password" name ="password"></td>

              <td><input type = "text" name= "age"></td>

              <td><input type="button"  name = "deleteButton" value="删除" onclick="deleteRow(this,'targetTable')"></td>

           </tr>

       </table>

       <table id="targetTable">

           <tr>

              <td>用户名</td>

              <td>密码</td>

              <td>年龄</td>

              <td>&nbsp;</td>

           </tr>

            <tfoot>

               <tr>

                  <td  colspan="4" align="right"><input type="button" value="增加行" onclick="insertRow('targetTable','sourceTable');"></td>

               </tr>

            </tfoot>

       </table>
</body>
</html>



///////////////////////////////////////
//////////////////////////////////////
<TABLE width="500" border="1" id="t" onKeyUp="sum(this)" onClick="setPos(this)">
<TR>
<TD><div contentEditable>项目\部门</div></TD>
<TD><div contentEditable>部门1</div></TD>
<TD><div contentEditable>部门2</div></TD>
<TD><div contentEditable>部门3</div></TD>
<TD><div contentEditable>统计</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物1</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物2</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物3</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物4</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物5</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>总计</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
</TR>
</TABLE>
<input type="button" value="加一行" onClick="insertRow(document.all.t)">
<input type="button" value="加一列" onClick="insertCell(document.all.t)">
<input name="button" type="button" onClick="deleteRow(document.all.t)" value="删除行">
<input type="button" value="删除列" onClick="deleteCell(document.all.t)">
<input type="button" value="正序排列" onClick="ascRow(document.all.t)">
<input type="button" value="反序排列" onClick="descRow(document.all.t)">
<br>
<input type="button" value="横向正序排列" onClick="ascCell(document.all.t)">
<input type="button" value="横向反序排列" onClick="descCell(document.all.t)">
<input type="button" value="全部数据统计" onClick="getSum(document.all.t,'total')">
<input type="text" value="0" name="total" style="width:50">
<SCRIPT LANGUAGE="JavaScript">
<!--
var currRow="0";
var currCell="0";
function getSum(obj,objName){
var sum=0;
  for(var i=1;i<obj.rows.length-1;i++){
  for(var j=1;j<obj.rows[i].cells.length;j++){
  sum+=parseInt(obj.rows[i].cells[j].innerText);
  }
}
document.getElementsByName(objName)[0].value=sum;
}

//正序排列*************************************
function ascCell(obj){
if(currCell>=1&&currRow>=1){
  var len=obj.rows[0].cells.length;
  for(var j=0;j<len;j++){
  var order=0;
  for(var i=1;i<len-2;i++){
  if(parseInt(obj.rows[currRow].cells[i].innerText)>parseInt(obj.rows[currRow].cells[i+1].innerText)){
  for(var k=0;k<obj.rows.length;k++){
  var tmp=obj.rows[k].cells[i].innerHTML;
  obj.rows[k].cells[i].innerHTML=obj.rows[k].cells[i+1].innerHTML;
  obj.rows[k].cells[i+1].innerHTML=tmp;
  }
  order++;
  }
  }
  len--;
  if(order==0){
  break;
  }
  }
}
clear();
}

//反序排列*************************************
function descCell(obj){
if(currCell>=1&&currRow>=1){
  var len=obj.rows[0].cells.length;
  for(var j=0;j<len;j++){
  var order=0;
  for(var i=1;i<len-2;i++){
  if(parseInt(obj.rows[currRow].cells[i].innerText)<parseInt(obj.rows[currRow].cells[i+1].innerText)){
  for(var k=0;k<obj.rows.length;k++){
  var tmp=obj.rows[k].cells[i].innerHTML;
  obj.rows[k].cells[i].innerHTML=obj.rows[k].cells[i+1].innerHTML;
  obj.rows[k].cells[i+1].innerHTML=tmp;
  }
  order++;
  }
  }
  len--;
  if(order==0){
  break;
  }
  }
}
clear();
}

//正序排行*************************************
function ascRow(obj){
if(currCell>=1){
  var rows=obj.rows;
  var len=rows.length-2;
  for(var j=0;j<=rows.length-2;j++){
  var order=0;
  for(var i=1;i<len;i++){
  if(parseInt(rows[i].cells[currCell].innerText)>parseInt(rows[i+1].cells[currCell].innerText)){
  obj.moveRow(i,i+1);
  order++;
  }
  }
  len--;
  if(order==0){
  break;
  }
  }
}
clear();
}

//反序排行*************************************
function descRow(obj){
if(currCell>=1){
  var rows=obj.rows;
  var len=rows.length-2;
  for(var j=0;j<rows.length-2;j++){
  var order=0;
  for(var i=1;i<len;i++){
  if(parseInt(rows[i].cells[currCell].innerText)<parseInt(rows[i+1].cells[currCell].innerText)){
  obj.moveRow(i,i+1);
  order++;
  }
  }
  len--;
  if(order==0){
  break;
  }
  }
}
clear();
}

//删除行*************************************
function deleteRow(obj){
var rows=obj.rows.length;
if(currRow>=1&&currRow<rows-1){
  obj.deleteRow(currRow);
}
clear();
averCol(obj);
}

//删除列*************************************
function deleteCell(obj){
  if(currCell>=1&&currCell<obj.rows[0].cells.length-1){
  for(var i=0;i<obj.rows.length;i++){
  obj.rows[i].deleteCell(currCell);
  }
  }
  clear();
  averCol(obj);
}


function averCol(obj){
  var wh=obj.width;
  var cells=obj.rows[0].cells;
  for(var i=0;i<cells.length;i++){
  cells[i].width=Math.ceil(wh/cells.length);
  }
}


//插入一列
function insertCell(obj){
  if(currCell&&currCell!=obj.rows[0].cells.length-1){
  for(var i=0;i<obj.rows.length;i++){
  obj.rows[i].insertCell(currCell+1);
  obj.rows[i].cells[currCell+1].innerHTML="<div contentEditable>0</div>";
  }
  clear();
  averCol(obj);
  chnBgcolor(obj,currRow,"ffffff");
  }
}
function check(obj){
  var k=parseInt(obj.innerText);
if(isNaN(k)){
  obj.childNodes[0].innerText=0;
  return 0;
}
else{
  obj.childNodes[0].innerText=k;
  return k;
}
}
function sum(obj){
  var o=event.srcElement;
var total=0;
var tindex=obj.rows.length-1;
if(o.parentElement.tagName=="TD"&&o.parentElement.cellIndex>=1&&o.parentElement.parentElement.rowIndex>=1){
  var index=o.parentElement.cellIndex;
  var pindex=o.parentElement.parentElement.rowIndex;
  for(var i=1;i<tindex;i++){
  var num=check(obj.rows[i].cells[index]);
  total=parseInt(total)+num;
  }
  var total1=0;
  for(i=1;i<obj.rows[pindex].cells.length-1;i++){
  total1+=check(obj.rows[pindex].cells[i]);
  }
  obj.rows[pindex].cells(obj.rows[pindex].cells.length-1).innerText=total1;
  obj.rows[tindex].cells[index].innerText=total;
  obj.rows[tindex].cells(obj.rows[0].cells.length-1).innerText=addAll(obj);
  }
  setPos(obj);
}
function chnBgcolor(obj,index,color){
  for(var i=0;i<obj.rows.length;i++){
  if(i==index){
  obj.rows[i].bgColor=color;
  }
  else{
  obj.rows[i].bgColor="ffffff";
  }
}
}
function setPos(obj){
  var o=event.srcElement;
  if(o.tagName=="DIV"){
  currRow=o.parentElement.parentElement.rowIndex;
  currCell=o.parentElement.cellIndex;
  chnBgcolor(obj,currRow,"dedede");
  }
  else if(o.tagName=="TD"){
  currRow=o.parentElement.rowIndex;
  currCell=o.cellIndex;
  }
  else{
  currRow=obj.rows.length-1;
  currCeil=obj.rows[0].cells.length-1;
  }
}
function clear(){
  currRow=0;
  currCell=0;
}
function addAll(obj){
  var total=0;
  for(var i=1;i<obj.rows[0].cells.length-1;i++){
  total+=parseInt(obj.rows[obj.rows.length-1].cells[i].innerText);
  }
  return total;
}
//-->
</SCRIPT>
分享到：
| Oracle关于时间/日期的操作
评论
发表评论

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

相关推荐

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

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

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

    table动态添加行

    在某些交互式应用中，用户可能需要动态地添加或删除表格行，以满足实时编辑和更新数据的需求。"table动态添加行"这个主题就涉及到如何在`HTML`表格中实现这些功能。 首先，我们要理解基本的`HTML`表格结构。一个...

    jquery table 添加、删除行、列

    本文将深入探讨如何使用jQuery实现表格的添加、删除行和列的功能，以便于动态更新和管理HTML表格内容。 首先，我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素开始，包含若干`&lt;tr&gt;`（表格行）元素...

    jquery table 添加、删除行、列 utf-8

    在创建动态数据展示时，表格（table）是常见的元素，jQuery 提供了一些方法来帮助我们方便地操作表格中的行（rows）和列（columns）。本文将详细介绍如何使用 jQuery 实现表格的添加、删除行与列的操作。 ### 1. ...

    点击table任意列选中当前行demo

    这个示例可能是为了实现用户在表格中通过点击某一列来选中整个行，以便进行进一步的操作，如编辑、删除或批量处理。下面我们将详细讨论这个功能的实现原理和涉及的技术点。 1. **HTML Table**：HTML中的`&lt;table&gt;`...

    js获取table行 列 的值

    下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格（`&lt;table&gt;`）中的行（`&lt;tr&gt;`）和列（`&lt;td&gt;`）的值。 #### 核心知识点解析 ### 一、HTML 结构解析 首先，让我们来分析一下给定的 HTML 代码结构： ```...

    动态增加table行

    在网页开发中，动态增加table行是一项常见的需求，特别是在数据展示和交互丰富的应用中。这个功能使得用户可以在表格中实时添加、编辑或删除数据行，提供了更好的用户体验。下面将详细解释这一技术及其相关知识点。 ...

    TableLayout，实现动态添加和删除行，并实现统计表格中的数据

    要动态添加行，首先需要创建一个新的TableRow对象，然后向其中添加需要显示的View（如TextView、EditText等）。一旦Row对象填充完成，将其添加到TableLayout的子视图集合中即可。例如： ```java TableRow row = ...

    动态的显示table列

    在IT领域，尤其是在Web开发中，动态地显示Table列是一个常见的需求。这通常涉及到前端数据可视化，特别是当数据集变化或者用户需要自定义视图时。这篇博客文章“动态的显示table列”可能探讨了如何在JavaScript环境...

    动态改变表格的行和列

    7. **库和框架支持：** 有许多优秀的JavaScript库如jQuery, DataTables, Handsontable等，提供了更丰富的功能，包括动态添加和删除行和列。它们简化了DOM操作，提供了更友好的API，同时具备数据排序、过滤、分页等...

    JavaScript动态操作表格，添加，删除行、列及单元格

    在本文中，我们将深入探讨如何使用JavaScript来动态地操作表格，包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下，实现灵活的数据管理功能。 1. **创建表格** 在HTML中，我们可以使用`&lt;table...

    bootstrap table实现双击可编辑、添加、删除行功能

    本文实例为大家分享了bootstrap table双击可编辑的具体代码，供大家参考，具体内容如下 html： &lt;table class=table id=para_table&gt; 名称 值 操作 &lt;td style=tex

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

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

    动态删除表格行、列、双击编辑.rar

    "动态删除表格行、列、双击编辑"的主题涉及到JavaScript编程、HTML和CSS等技术的应用，旨在实现用户交互性强、灵活多变的表格功能。下面将详细介绍这些知识点。 首先，动态删除表格行和列是Web应用中增强用户体验的...

    JSP中使用JavaScript动态插入删除输入框实现代码.docx

    JSP中使用JavaScript动态插入删除输入框实现代码 JSP（Java Server Pages）是一种基于Java技术的服务器端脚本语言，主要...通过JavaScript代码，我们可以动态地添加或删除输入框，提高了Web应用程序的交互性和灵活性。

    javascript对table的添加，删除行的操作

    在JavaScript中，对HTML表格（`&lt;table&gt;`元素）进行添加和删除行的操作是常见的前端开发任务，尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先，我们需要理解HTML表格...

    table添加、删减行，单元格添加、修改、删除标记，对于指定标记默认生成显示，浮动定位且不会产生水平导航条

    综上所述，使用jQuery处理表格提供了丰富的交互可能性，可以轻松实现动态添加、删除行和单元格，以及根据特定标记进行操作。在实际应用中，还需要注意性能优化，避免大量DOM操作导致的性能下降。同时，合理的CSS布局...

    JS动态增加删除行

    在JavaScript（JS）编程中，动态增加和删除行是一项常见的任务，特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验，使用户能够实时地添加或移除数据，无需刷新整个页面。以下是对这一知识点的详细...

    Vue ~ element-ui 动态表单验证，支持添加和删除操作

    在实际应用中，往往需要支持用户在表单中动态添加或删除字段。Vue的数组操作方法（如push、pop、splice等）可以帮助我们轻松地管理表单数据的增删。同时，el-form和el-table可以实时响应数据变化，实现视图的同步...

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