<!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=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>

<script language="javascript">
//动态添加删除table行
var rowIndex = 0;
aaa=function(id){return (typeof(id)=='object')?id:document.getElementById(id);}
function add() {
var row=aaa("tb").insertRow(aaa("tb").rows.length);
col0 = row.insertCell(0);
col1 = row.insertCell(1);
col2 = row.insertCell(2);

col0.width="300px"; //控制TD样式




//向TD插入内容
col0.innerHTML ="<tr name='btn' index=\""+ rowIndex +"\">" +
"<input id='work1"+rowIndex+"' value='"+rowIndex+"' name='work1"+rowIndex+"' type='text' class='work1'/>";
col1.innerHTML ="<input type='button' value='添加' onclick=\"return AddRow('row" + rowIndex +"')\">";
col2.innerHTML ="<input type='button' value='删除' onclick=\"return DeleteRow('row" + rowIndex +"')\"></tr>";
row.setAttribute("id", "row" + rowIndex);
row.setAttribute("name", "row" + rowIndex);
rowIndex++;
}
function DeleteRow(rowTag){ //删除
var i = aaa("tb").rows[rowTag].rowIndex;
//alert(i);
//alert(rowIndex);
var j;
//for(j=i;j<=rowIndex;j++) {
//$("tb").rows[j].index--;
//}
aaa("tb").deleteRow(i);
rowIndex--;
}
function getRow(){

}
function AddRow(rowTag){ //删除
var i = aaa("tb").rows[rowTag].rowIndex;
//alert(rowIndex);
for(var j=rowIndex; j>i+1; j--){
var p=j-1;
var nnn="work1"+j;
var mmm="row"+j;
document.getElementById('work1'+p).id=nnn;
//row.setAttribute("id", "row" + y);

}

var x=i+1;
alert(x);
var row=aaa("tb").insertRow(i+1);
col0 = row.insertCell(0);
col1 = row.insertCell(1);
col2 = row.insertCell(2);

col0.width="300px"; //控制TD样式

//向TD插入内容
col0.innerHTML ="<tr name='btn' index=\""+ x +"\">" +
"<input id='work1"+x+"' value='"+x+"' name='work1' type='text' class='work1'/>";
col1.innerHTML ="<input type='button' value='添加' onclick=\"return AddRow('row" + x +"')\">";
col2.innerHTML ="<input type='button' value='删除' onclick=\"return DeleteRow('row" + x +"')\"></tr>";
row.setAttribute("id", "row" + x);
row.setAttribute("name", "row" + x);
rowIndex++;
}

var TrArray1 = new Array();
var TrArray2 = new Array();
function getDongtai(){ //获取动态列表值到域
var itemsLength = rowIndex;//行数
//alert("itemsLength"+itemsLength);
//第一列
var sum="";
for (var i = 0; i < itemsLength; i++) {
//TrArray1[i] =document.getElementsByClassName('work1')[i].value;
TrArray1[i] =document.getElementById('work1'+i).value;
//sum.push(TrArray1[i]);
sum = sum + TrArray1[i]+"*";
}
alert(TrArray1);
}

function showTable(){ //审批、结束环节的展示
//第一列
//var text1=document.getElementById("Text1").value;
var showTd1= new Array();

//第二列
//var text2=document.getElementById("Text2").value;
var showTd2= new Array();
//var tbHTML1 = "<table><tbody>";
//for(var i=0;i<showTd1.length - 1;i++){
//tbHTML1=tbHTML1+"<tr><td>"+showTd1[i]+"</td><td>"+showTd2[i]+"</td></tr>";
//}
//tbHTML1=tbHTML1+"</table></tbody>";
//alert(tbHTML1);
//document.getElementById("#{id:tb1}").value = tbHTML1;

for(var i=0;i<TrArray1.length;i++){
var row=aaa("tb1").insertRow(aaa("tb1").rows.length);
col0 = row.insertCell(0);
col1 = row.insertCell(1);
//col2 = row.insertCell(2);

col0.width="300px"; //控制TD样式
col1.width="300px";
col0.style.wordWrap="break-word";
col1.style.wordWrap="break-word";
col0.style.fontSize="18px";
col1.style.fontSize="18px";
col0.style.fontFamily="FangSong";
//向TD插入内容
col0.innerHTML ="<tr name='btn' index=\""+ i +"\">" +
"<td id='wan1"+i+"'>"+TrArray1[i]+"</td>";
col1.innerHTML ="<td>"+TrArray2[i]+"</td></tr>";
row.setAttribute("id", "row" + i);
row.setAttribute("name", "row" + i);

}

}
//style="position:absolute ;top:-1px;left:0px;border-collapse:collapse;"
</script>

</head>
<body>
<p>
<input name="btnAddLine" type="button" id="btnAddLine" onClick="return add()" value="加入一行">
<input name="btnAddLine1" type="button" id="haha" onClick="return getDongtai()" value="取数">
<input name="btnAddLine2" type="button" id="haha1" onClick="return showTable()" value="show">
</p>
<table border="" cellspacing="" cellpadding="">
<tr>
<td>
<div>
<table name="tb" id="tb" >

</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="one" style=" width:1030px;height:auto;min-height:50px;padding-top:0px;overflow:auto;" >
<table frame="void" border="1" cellspacing="0" cellpadding="0" bordercolor="black" name="tb1" id="tb1" width="1030px" style="border-collapse:collapse; ">

</table>
</div>
</td>
</tr>
</table>

</body>
</html>

JS控制TABLE表格在任意一行下面添加一行（有待完善）的更多相关文章

  1. 第十三篇 JS 操作table表格

    JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...

  2. js创建table表格

    //js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...

  3. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  4. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  5. JS获取table表格任意单元格值

    jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...

  6. element+vue点击新增表格内在已有数据添加一行带输入框内容

    在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容 table的数据为datas=[],那么下面是一列的数据,多列可循环或复制 <el-table-colu ...

  7. html table表格列数太多添加横向滚动条

    HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...

  8. JS实现table表格在鼠标移动出现一行变色或者十字叉变色

    1,一行变色 <script> function trBg(){ var tab=document.getElementById("table"); var tr=ta ...

  9. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

随机推荐

  1. asp.net XMLHttpRequest 进度条以及lengthComputable always false的解决办法

    一直用ajax好长时间了,对其原理也有一些了解,最近由于项目需要,使用ajax异步进度条的效果,就研究了一下,用原生的XMLHttpRequest实现进度条函数,XMLHttpRequest有以下函数 ...

  2. Dell DRAC的重启方法

    SSH 22连接后:racadm racreset

  3. mysql数据库服务日志

    mysql数据库服务日志 ①. 错误日志:error_log ②. 普通日志:general_log ③. 慢查询日志:log-slow-query #有3个参数 分割:.mv .编写定时任务并执行: ...

  4. 虚拟机安装Centos7 , 没有可用的网络设备【ifconfig 只有lo而没有eth0的解决办法】

    今天尝试再一次安装CentOS的时候,搞了半天不知何故上不了网络,网上的以下方式试了 也不管用,原因就是我下载的是CentOS7 64版本,从而导致了这个问题,具体如下描述: 第一次安装的时候,没有可 ...

  5. 实时发布到tomcat

    当我们在运用eclipse进行web项目的文件编写的时候,希望编写的东西可以实时的发布在tomcat的webapps文件夹之中,那么我们应该怎么做呢!下面就是操作方法:   1. 首先你的eclips ...

  6. git的一些命令行

    以下代码均在命令行中执行:在目标文件夹目录下: 1.初始化一个Git仓库,使用git init命令. 2.添加文件到Git仓库,分两步: 第一步,使用命令git add <file>,注意 ...

  7. vue transition

    Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...

  8. mybatis使用generator生成对应的model、mapping配置文件、dao

    http://blog.csdn.net/fengshizty/article/details/43086833 使用时 补充 输入命令:cd d:\generator  敲回车 再输入命令:d: 敲 ...

  9. vs快捷键大全

    前言 作为一个.net开发员,你还在用鼠标去点击相应的操作么?如果你回答是,那么你太low了! 一个很厉害的程序员不会是那种这鼠标到处狂点的人,他们肯定会很多快捷键,所以为了离他们更近一步,我们必须学 ...

  10. CentOS安装cacti

    1.安装软件包 yum install -y httpd php php-mysql \ php-snmp mysql mysql-server \ perl-DBD-MySQL php-pdo ne ...