JS操作表格

最新推荐文章于 2024-04-30 22:06:17 发布
最新推荐文章于 2024-04-30 22:06:17 发布
阅读量119 收藏
点赞数
文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_14045/article/details/82604351
版权 
<!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>
</head>
<body>
<p>动态表格彻底研究</p>
<p>对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术</p>
<p>
<input type="button" name="Submit" value="刷新" οnclick="onRefresh()" />
<input type="button" name="Submit2" value="全选" οnclick="selectall()"/>
<input type="button" name="Submit8" value="反选" οnclick="inverse()" />
<input type="button" name="Submit3" value="不选" οnclick="noselect()"/>
<input type="button" name="Submit4" value="添加行与列" οnclick="insert_row()" />
<input type="button" name="Submit7" value="删除选择" οnclick="delRow()" />
<input type="button" name="Submit5" value="拷贝选择" οnclick="copyRow()"/>
<input type="button" name="Submit92" value="居中对齐" οnclick="tableAlign()"/>
<input type="button" name="Submit922" value="隔行变色" οnclick="changeColor()"/>
</p>
<table width="50%" border="1" cellpadding="1" cellspacing="2" bordercolor="#CCCCCC" id="myTable">
<tr>
<td width="7%">
<label>
<input type="checkbox" name="checkbox" value="checkbox" />
</label> </td>
<td width="51%">1</td>
<td width="14%">1</td>
<td width="14%">1</td>
<td width="14%">1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox2" value="checkbox" /></td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox3" value="checkbox" /></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox4" value="checkbox" /></td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox5" value="checkbox" /></td>
<td>5</td>
<td colspan="2">55</td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox6" value="checkbox" /></td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>56</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox7" value="checkbox" /></td>
<td>777</td>
<td>7</td>
<td>77</td>
<td>7</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox8" value="checkbox" /></td>
<td>88</td>
<td>8</td>
<td>88</td>
<td>77</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox9" value="checkbox" /></td>
<td>999</td>
<td>99</td>
<td>99</td>
<td>999</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox10" value="checkbox" /></td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</table>
<br />
<p></p>
<script type="text/javascript">
var form = document.forms["form1"];
var table = document.getElementById("myTable");
var selectBox = table.getElementsByTagName("input");
var tr = table.getElementsByTagName("tr");
var clicked = true;
function insert_row(){
//alert(table.rows[0].cells.length)
var thisrow = table.insertRow(0);
var thiscell = thisrow.insertCell(0);
thiscell.innerHTML = "<input type=\"checkbox\" name=\"checkbox10\" value=\"checkbox\" />";
var thiscell1 = thisrow.insertCell(1);
thiscell1.innerHTML = "cell";
var thiscell2 = thisrow.insertCell(2);
thiscell2.innerHTML = "cell";
var thiscell3 = thisrow.insertCell(3);
thiscell3.innerHTML = "cell";
var thiscell4 = thisrow.insertCell(4);
thiscell4.innerHTML = "cell";
thiscell4.align = "center";

}
function insert_Cell(){
var y = table.rows[0].insertCell(0);
y.colSpan="2";
y.innerHTML = "sssss";
}
function selectall(){
for(i=0;i<selectBox.length;i++){
selectBox[i].checked = true;
}
}
function noselect(){
for(i=0;i<selectBox.length;i++){
selectBox[i].checked = false;
}
}
function inverse(){
for(i=0;i<selectBox.length;i++){
if(selectBox[i].checked){
selectBox[i].checked = false;
}else{
selectBox[i].checked = true;
}
}
}
function delRow(){
for(i=selectBox.length-1;i>=0;i--){
//alert(typeof(selectBox[i]));
if(selectBox[i].checked){
table.deleteRow(i);
}
}
}
function onRefresh(){
location.reload();
}
function copyRow(){
for(i=0;i<selectBox.length;i++){
if(selectBox[i].checked){
//var copytable = document.getElementById("copyTable");
var tablerow = table.insertRow(table.rows.length);
tablerow.innerHTML = table.rows[i].innerHTML;
}
}
}
function tableAlign(){
for(i=0;i<selectBox.length;i++){
if(selectBox[i].checked && clicked){
table.rows[i].align = "center";
}
}
}
function changeColor(){
var skip = true;
for(i=0;i<tr.length;i++){ 
if(skip){
tr[i].bgColor = "#cccccc";
skip = false;
}else{
tr[i].bgColor = "#ffffff";
skip = true;
}
}
}

</script>
</body>
</html>

 转载:出处不记得了。。。。

iteye_14045
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现
08-12
对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术。 js刷新、复选框全选，全不选，添加，拷贝，上下移动，删除功能实现。
js做动态表格（可删除，全选，反选，添加行与列，删除选择...）
WEBCODE
08-02 567
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
js 表格操作
flyer222的专栏
04-26 838
function subLogon(){     if(fmLogon.suser.value==""){         alert("用户名不能为空！");         fmLogon.suser.select();         return false;     }else if(fmLogon.spass.value==""){         alert("密码不能为空！")
js简单表格操作
07-15
js简单表格操作，对表格进行增删改，效果可看博客： https://blog.csdn.net/qq_37902949/article/details/81056551
js动态添加表格,全选和删除
mmmv390的专栏
05-21 1477
效果图: 代码:
javascript操作表格
12-09
Power Table body{ FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; } input { FONT-SIZE: 9pt; height: 15pt; width:50px;... background-color:#eeeec
js操作表格
12-18
js操作表格 实例 js操作表格 实例 js操作表格 实例
Javascript 表格操作实现代码
10-29
Javascript操作表格 包括获取值，创建表格
简单的js表格操作
11-22
效果图：   任务：  1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff  var tr=document.getElementsByTagName("tr");... // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件...
JavaScript表格的全选和删除
banmengyou的博客
04-20 1423
这周JavaScript有一个是制作一个表格，在表格中一点全选就把复选框中的按钮选中，点后面的表格中的del就能删除相应的行，一开始并没有头绪，即使以前做过全选的，但是，再做起来还是不能很快的做出来，也还有很多不了解的地方，要不是问同学还不一定做的出来呢。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset...
通用的JSP分页+增删改查+批量删除
07-30
NULL 博文链接：https://ware.iteye.com/blog/834527
JavaScript动态添加表格传值,全选，一键删除，功能齐全
weixin_45748576的博客
10-15 410
老规矩，先上效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态表格</title> </head> <script type="text/javascript"> function addItem() ...
使用JS实现简单的表格的增加删除全选反选以及高亮效果
Jack_num1的博客
09-22 1227
友情提示：运行代码还需在网上下载jquery.min.js文件并把html文件反正同一文件下         Title             table,tr,th,td{             padding: 0;             margin: 0;         }         table {             border: 2
点击动态创建表格、单行删除、全选、全部一键删除
沐枫
05-25 1465
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js表格操作</title> <style type="text/css"> html, body { font...
js实现表格的全选，反选，删除所选行以及隔行变色
zunguitiancheng的专栏
06-27 1505
Untitled Document                                        table{                     border:#249bdb 1px solid;                     width:500px;                     border-collapse:collapse;  
动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证
愿我如星君如月 ... 夜夜流光相皎洁 ...
03-01 1761
动态生成表格、隐藏表格、选中删除任意行、jquery、游戏后台GM开发....
动态增加，删除表格行并按照表格列排序
蜗牛学习笔记
04-16 3004
解决掉的问题 1 乱码的问题 2 删除方法更加简便，省去获取父节点id的代码 3 点击第一行的add按钮后，下行table行变宽问题 function sortTable(){ // 获取表格 var oTable = document.getElementById("tb1"); // 获取表格中tBody主体域 var oTBody = oTable.tBodies[0]; // 获取oTBody域中行集合 var colDataRows = oTBod
常见的 HTML 标准
最新发布
csdn_ad986ad的博客
04-30 897
HTML（Hypertext Markup Language）有多个版本和标准。
js操作表格的方法介绍
09-24
### 回答1： JavaScript可以通过以下方法操作表格： 1. 获取表格元素 可以通过`document.getElementById()`或`document.getElementsByTagName()`来获取表格元素。例如： ```javascript var table = document.getElementById("myTable"); ``` 2. 获取表格行和单元格 可以使用`table.rows`来获取表格中的所有行，然后使用`row.cells`来获取行中的所有单元格。例如： ```javascript var table = document.getElementById("myTable"); var rows = table.rows; for (var i = 0; i < rows.length; i++) { var cells = rows[i].cells; for (var j = 0; j < cells.length; j++) { var cell = cells[j]; // do something with the cell } } ``` 3. 创建表格行和单元格 可以使用`table.insertRow()`方法来创建表格行，使用`row.insertCell()`方法来创建单元格。例如： ```javascript var table = document.getElementById("myTable"); var row = table.insertRow(0); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = "Hello"; cell2.innerHTML = "World"; ``` 4. 删除表格行和单元格 可以使用`row.parentNode.removeChild(row)`方法来删除表格行，使用`cell.parentNode.removeChild(cell)`方法来删除单元格。例如： ```javascript var table = document.getElementById("myTable"); var row = table.rows[0]; var cell = row.cells[0]; row.parentNode.removeChild(row); cell.parentNode.removeChild(cell); ``` 5. 修改表格样式 可以使用`element.style`属性来修改表格的CSS样式。例如： ```javascript var table = document.getElementById("myTable"); table.style.border = "1px solid black"; ``` 6. 获取和设置表格内容 可以使用`cell.innerHTML`属性来获取和设置单元格的内容。例如： ```javascript var table = document.getElementById("myTable"); var cell = table.rows[0].cells[0]; var content = cell.innerHTML; cell.innerHTML = "New Content"; ``` ### 回答2： 在JavaScript中，可以使用多种方法来操作表格。 首先，我们可以通过getElementById（）方法来获取表格的引用。这个方法可以用来获取HTML文档中具有指定id的元素，对于表格，我们可以给表格添加一个id，并使用这个方法来获取它的引用。 然后，我们可以使用表格引用的属性和方法来进行各种操作。例如，可以使用rows属性来获取表格中的行数，并使用insertRow（）方法添加新行或使用deleteRow（）方法删除行。可以使用cols属性来获取表格中的列数，并使用insertCell（）方法添加新单元格或使用deleteCell（）方法删除单元格。 此外，我们还可以通过使用innerHTML属性来修改表格的内容。可以将HTML代码赋值给一个具体的表格单元格，以更新该单元格的内容。例如，可以使用document.getElementById（'tableId'）。rows [i] .cells [j] .innerHTML = '新内容'来将新内容赋值给具体的单元格。 另外，还有一些其他的方法可以对表格进行更高级的操作。例如，可以使用setAttribute（）方法来添加或修改表格的属性，例如设置表格的边框样式或宽度。还可以使用addEventListener（）方法来添加事件监听器，以便在表格上执行特定操作，例如单击表格行时触发某个函数。 总结起来，通过使用getElementById（）方法获取表格引用，然后使用表格的属性和方法，如rows，cols，insertRow（），insertCell（），innerHTML等，可以实现对表格的各种操作和修改。通过这些方法，我们可以动态地创建、修改和删除表格的行和单元格，并且可以根据需要更新表格的内容和样式。 ### 回答3： JavaScript操作表格的方法有很多种，以下是几种常用的方法介绍： 1. 通过DOM方法操作表格：使用getElementById、getElementsByTagName等DOM方法获取表格对象，然后通过操作表格的属性和方法来实现对表格的操作，如设置表格的行数、列数，获取表格的指定单元格等。 2. 使用innerHTML属性动态生成表格：通过在JavaScript中拼接HTML字符串，然后通过设置表格的innerHTML属性将生成的HTML代码插入到指定位置，实现动态生成表格的效果。这种方法可以实现动态添加、删除、修改表格中的行、列和单元格。 3. 使用insertRow和insertCell方法插入新行和新单元格：通过使用表格对象的insertRow和insertCell方法，可以在指定位置动态地插入新的行和单元格。可以通过设置单元格的innerHTML属性来插入文本内容或其他HTML元素。 4. 使用deleteRow和deleteCell方法删除行和单元格：通过表格对象的deleteRow和deleteCell方法，可以在指定位置删除对应的行和单元格。 5. 使用setAttribute和getAttribute方法修改和获取表格的属性：通过使用表格对象的setAttribute和getAttribute方法，可以修改和获取表格的属性，如设置表格的宽度、高度、边框样式等。 总结来说，JavaScript操作表格的方法主要包括通过DOM方法操作表格、使用innerHTML属性动态生成表格、使用insertRow和insertCell方法插入新行和新单元格、使用deleteRow和deleteCell方法删除行和单元格，以及使用setAttribute和getAttribute方法修改和获取表格的属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值