JS控制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=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表格在任意一行下面添加一行（有待完善）的更多相关文章
- 第十三篇 JS 操作table表格
JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...
- js创建table表格
//js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- 原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- JS获取table表格任意单元格值
jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...
- element+vue点击新增表格内在已有数据添加一行带输入框内容
在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容 table的数据为datas=[],那么下面是一列的数据,多列可循环或复制 <el-table-colu ...
- html table表格列数太多添加横向滚动条
HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...
- JS实现table表格在鼠标移动出现一行变色或者十字叉变色
1,一行变色 <script> function trBg(){ var tab=document.getElementById("table"); var tr=ta ...
- 纯JS 将table表格导出到excel
html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...
随机推荐
- 关于SQL Server将一列的多行内容拼接成一行的问题讨论
http://blog.csdn.net/rolamao/article/details/7745972 昨天遇到一个SQL Server的问题:需要写一个储存过程来处理几个表中的数据,最后问题出在我 ...
- Openbox中指定目录打开程序
现在遇到这样的情况,在浏览器的下载中,点击在文件夹中显示, 结果这个使用系统调用的是Baobab,一款分析磁盘使用情况的软件,而不是使用目录浏览程序,例如nautilus 查询后知道,系统使用xdg- ...
- 使用bat/vbs/ahk对Windows下进行自动化操作
回想90年代,我们在DOS下使用各种命令链对操作进行简化和自动化,如DOS 5.0添加的DosKey,利用管道和重定向对多组命令进行链式操作.后来使用了Ubuntu和其它Linux发型版后,bash下 ...
- 机器学习实战4：Adaboost提升：病马实例+非均衡分类问题
Adaboost提升算法是机器学习中很好用的两个算法之一,另一个是SVM支持向量机:机器学习面试中也会经常提问到Adaboost的一些原理:另外本文还介绍了一下非平衡分类问题的解决方案,这个问题在面试 ...
- JSON.stringify（）
概述 JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串. 语法 JSON.stringify(value[, replacer [, space] ...
- 数据终端设备与无线通信模块之间串行通信链路复用协议（TS27.010）在嵌入式系统上的开发【转】
转自:http://blog.csdn.net/hellolwl/article/details/6164449 目录(?)[-] 协议介绍 模块协议介绍 1 命令包格式 2 ...
- 写了一个简易的GBK文件向UTF8文件转换的工具
package com.bocom.framework.util; import java.io.BufferedReader; import java.io.BufferedWriter; impo ...
- 6. Samba服务和防火墙配置笔记
Samba文件服务器 (一)简介 内网文件服务器 windows-windows 文件共享服务 网络邻居linux-linux NFS windows-linux Samba (二)端口 smbd: ...
- PHP之初识PHP(1)
酸菜记 之 初识PHP 这是我从零基础了解PHP开始学习的笔记,共同学习,有不对之处,望指出共同学习. 一.初了解PHP PHP 是超文本预处理语言 php HyperText Preprocesso ...
- ICTCLAS20160405分词系统调试过程
一.前期准备: 1.下载最新版本的资源包:CTCLAS20160405171043_ICTCLAS2016分词系统下载包 2.下载最新版本的licence:https://github.com/NLP ...