`

动态增加 删除table行 列等

阅读更多
<!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>
分享到:
评论

相关推荐

    scratch少儿编程逻辑思维游戏源码-城堡战争.zip

    scratch少儿编程逻辑思维游戏源码-城堡战争.zip

    【Go语言编程】大厂Go工程师面试题集锦:涵盖并发、网络、数据库及算法设计要点

    内容概要:本文档汇集了来自字节跳动、腾讯、金山WPS、跟谁学和百度等大厂的Go工程师面试题,涵盖广泛的技术领域。主要包括Go语言特性(如goroutine调度、channel机制)、操作系统(进程间通信、线程调度)、计算机网络(TCP/IP协议栈、HTTP协议)、数据结构与算法(排序算法、LRU缓存)、数据库(MySQL索引优化、Redis内部机制)、分布式系统(负载均衡、服务发现)等方面的知识点。通过这些问题,不仅考察应聘者的理论基础,还测试其实际项目经验和技术深度。 适合人群:有一定Go语言编程经验和计算机基础知识的开发者,特别是准备应聘互联网大厂的中级及以上水平的后端工程师或全栈工程师。 使用场景及目标:①帮助求职者全面复习Go语言及其相关领域的核心概念;②为面试官提供有价值的参考题目,确保候选人具备解决复杂问题的能力;③指导工程师深入理解并掌握企业级应用开发所需的关键技能。 阅读建议:由于题目覆盖面广且难度较高,建议读者结合自身情况选择重点复习方向,同时配合实际编码练习加深理解。对于每个知识点,不仅要记住答案,更要理解背后的原理,这样才能在面试中灵活应对各种变体问题。

    scratch少儿编程逻辑思维游戏源码-堡垒之夜(吃鸡游戏).zip

    scratch少儿编程逻辑思维游戏源码-堡垒之夜(吃鸡游戏).zip

    少儿编程scratch项目源代码文件案例素材-派.zip

    少儿编程scratch项目源代码文件案例素材-派.zip

    scratch少儿编程逻辑思维游戏源码-Scratch 冒险.zip

    scratch少儿编程逻辑思维游戏源码-Scratch 冒险.zip

    2025 飞特舵机, Arduino版本

    2025 飞特舵机, Arduino版本

    scratch少儿编程逻辑思维游戏源码-躲避.zip

    scratch少儿编程逻辑思维游戏源码-躲避.zip

    PFC5.0纤维混凝土三点弯曲模拟:参数化建模与实验分析

    内容概要:本文详细介绍了利用PFC5.0进行纤维混凝土三点弯曲模拟的方法。首先,作者展示了如何通过定义纤维的体积含量、长度、半径和刚度等关键参数来构建纤维网络。接着,描述了三点弯曲加载的具体实现方式,包括加载速率控制和终止条件设定。最后,提供了后处理方法,如绘制并导出力-位移曲线图,以便于分析材料破坏机制。文中还给出了若干实用建议,如纤维半径的选择范围、加载速率的初始值以及不同类型纤维的接触模型选择。 适合人群:从事材料科学尤其是混凝土材料研究的专业人士,以及对离散元法和数值模拟感兴趣的科研工作者。 使用场景及目标:适用于希望深入了解纤维混凝土力学性能的研究人员,旨在帮助他们掌握PFC5.0软件的操作技巧,优化模拟参数设置,提高实验效率。 其他说明:文中提供的代码片段可以直接应用于实际项目中,同时附带了一些实践经验分享,有助于初学者快速入门并避免常见错误。

    少儿编程scratch项目源代码文件案例素材-生存V1(有BAG).zip

    少儿编程scratch项目源代码文件案例素材-生存V1(有BAG).zip

    少儿编程scratch项目源代码文件案例素材-披萨机器人.zip

    少儿编程scratch项目源代码文件案例素材-披萨机器人.zip

    少儿编程scratch项目源代码文件案例素材-气球滑雪板.zip

    少儿编程scratch项目源代码文件案例素材-气球滑雪板.zip

    少儿编程scratch项目源代码文件案例素材-使命召唤(苏联插旗).zip

    少儿编程scratch项目源代码文件案例素材-使命召唤(苏联插旗).zip

    可跨平台移植的模拟IIC实战项目STM32F407-TestIIC

    1. GPIO模拟I2C 实战项目,根据正点原子 STM32F407ZGT6 进行更改; 2. 可适配STM32、GD32、HC32等MCU;

    scratch少儿编程逻辑思维游戏源码-百米冲刺.zip

    scratch少儿编程逻辑思维游戏源码-百米冲刺.zip

    【蓝桥杯竞赛】历年试题精选与备考资源汇总:编程算法及硬件单片机试题解析与练习指导

    内容概要:本文档汇总了蓝桥杯历年试题及练习资源,涵盖编程类试题精选、硬件与单片机试题、练习资源与题库以及备考建议。编程类试题精选包括基础算法题(如数组求和、质因数分解)、经典算法案例(如最大子序列和、兰顿蚂蚁模拟)和数据结构应用(如字符全排列)。硬件与单片机试题主要涉及客观题考点,如BUCK电路和电源设计。练习资源与题库部分介绍了真题平台(如Dotcpp、CSDN专题)和专项训练包(如Python题库、Java百题集、C++真题解析)。备考建议分为分阶段练习(新手阶段、进阶提升)和模拟实战(如使用Dotcpp估分系统进行限时训练),强调按年份和组别分类练习,强化代码实现与调试能力。; 适合人群:准备参加蓝桥杯竞赛的学生及编程爱好者。; 使用场景及目标:①针对不同编程语言和难度级别的题目进行专项训练;②通过历年真题和模拟实战提高解题速度和准确性;③掌握算法设计、数据结构应用及硬件基础知识。; 阅读建议:此文档提供了丰富的试题和练习资源,建议根据自身水平选择合适的题目进行练习,并结合真题平台的估分系统和社区开源代码进行对比优化,逐步提升编程能力和竞赛水平。

    30kW储能PCS原理图设计:量产设计的关键要素与优化策略

    内容概要:本文详细介绍了30kW储能PCS(电力转换系统)原理图的设计要点及其量产化过程中需要注意的技术细节。首先阐述了储能PCS的基本概念和重要性,接着深入探讨了主拓扑结构的选择,特别是双级式结构的优势以及关键组件如IGBT的驱动时序配置。随后讨论了控制算法的智能化改进,包括加入前馈补偿以提高系统的稳定性。此外,还强调了EMC设计、PCB布局、元件选择等方面的注意事项,并分享了一些实际生产中遇到的问题及解决方案。最后提到了自动化测试方法和散热管理策略,确保产品在各种环境下的可靠运行。 适合人群:从事储能系统设计、电力电子产品研发的工程师和技术人员。 使用场景及目标:帮助读者掌握30kW储能PCS从原理图设计到量产实施的全流程关键技术,提升产品的性能和可靠性,避免常见错误。 其他说明:文中提供了具体的代码片段和实践经验,有助于理解和应用相关理论。

    少儿编程scratch项目源代码文件案例素材-喷气包多德.zip

    少儿编程scratch项目源代码文件案例素材-喷气包多德.zip

    机械工程中基于Python的齿轮啮合性能与动态响应分析

    内容概要:本文深入探讨了齿轮啮合性能及其动态特性,特别是直齿轮的基础参数计算、渐开线绘制以及接触力仿真的具体实现。首先介绍了齿轮的基本参数如模数、齿数、压力角等,并给出了具体的计算实例。接着详细讲解了如何利用Python进行渐开线的数学建模并绘图展示,强调了这种曲线对于确保齿轮平稳传动的重要性。然后讨论了齿轮在啮合过程中接触力的变化规律,提供了简化的Python代码来模拟这一现象。最后指出,在实际工程项目中应当借助专业的软件包如PyDy或ADAMS来进行更加精确的动力学分析,同时肯定了自行编写代码的价值在于能够更好地理解和排查问题。 适合人群:机械工程领域的研究人员、工程师以及相关专业的学生。 使用场景及目标:①帮助读者掌握齿轮基本理论知识;②指导读者运用Python编程技能完成简单的齿轮性能分析任务;③为后续深入研究提供思路和技术支持。 阅读建议:由于文中涉及较多的专业术语和数学公式,建议读者提前复习相关基础知识,并尝试运行提供的代码片段加深理解。此外,对于想要进一步探索该领域的读者来说,可以参考文末提到的专业工具包进行更复杂的研究。

    少儿编程scratch项目源代码文件案例素材-任务.zip

    少儿编程scratch项目源代码文件案例素材-任务.zip

    少儿编程scratch项目源代码文件案例素材-时光大盗.zip

    少儿编程scratch项目源代码文件案例素材-时光大盗.zip

Global site tag (gtag.js) - Google Analytics