Table cells 集合

最新推荐文章于 2023-03-01 17:17:20 发布
最新推荐文章于 2023-03-01 17:17:20 发布
阅读量705 收藏 1
点赞数
分类专栏： Java Web开发实战

Table cells 集合

Table 对象参考手册 Table 对象

定义和用法

cells 集合返回表格中所有 <td> 或 <th> 元素。

语法

tableObject.cells

属性

属性 描述
length 返回集合中 <td> 或 <th> 元素的数目。

方法

方法 描述
[name_or_index] 一个整数，指定元素检索位置（从0开始）
item(name_or_index) 返回集合中的指定索引的元素
namedItem(name) 返回集合中指定名称索引的元素索引

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主要浏览器都支持 cells 集合

实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Cells集合</title>
    <script>
        function displayResult(){
            alert(document.getElementById("myTable").rows[0].cells.length);
        }
    </script>
</head>
<body>
<table id="myTable" border="1" width="200px;">
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
    </tr>
    <tr>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>
<p><input type="button" οnclick="displayResult()" value="显示第一行单元格的数量"/></p>
</body>
</html>
弹出第一行的内容： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>弹出第一行的内容</title>
    <script type="text/javascript">
        function showRow(){
            alert(document.getElementById("myTable").rows[0].innerHTML);
        }
    </script>
</head>
<body>
<table id="myTable" border="1" width="250px;">
    <tr>
        <td>行1 列1</td>
        <td>行1 列2</td>
    </tr>
    <tr>
        <td>行2 列1</td>
        <td>行2 列2</td>
    </tr>
    <tr>
        <td>行3 列1</td>
        <td>行3 列2</td>
    </tr>
</table>
<p><input type="button" οnclick="showRow()" value="显示第一行的HTML文本"/></p>
</body>
</html>
添加行： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>添加行</title>
    <script type="text/javascript">
        function insCell(){
            var x=document.getElementById("tr1").insertCell(0);
            x.innerHTML="The famous";
        }
    </script>
</head>
<body>
<table border="1">
    <tr id="tr1">
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
</table>
<p><input type="button" οnclick="insCell()" value="插入单元格"/></p>
</body>
</html>
对齐表格行中的单元格内容： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>对齐表格行中的单元格内容</title>
    <script type="text/javascript">
        function leftAlign(){
            document.getElementById("header").align="right"
        }
    </script>
</head>
<body>
<table border="1" width="100%">
    <tr id="header">
        <th>FirstName</th>
        <th>lastName</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
</table>
<p><input type="button" οnclick="leftAlign()" value="内容向右对齐"/></p>
<p><b>注意:</b>该实例不适用IE浏览器。</p>
</body>
</html>
表中的行的单元格内容的垂直对齐： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表中的行的单元格内容的垂直对齐</title>
    <script type="text/javascript">
        function topAlign(){
            document.getElementById("tr2").vAlign="top";
        }
    </script>
</head>
<body>
<table border="1" width="20%">
    <tr id="tr1">
        <th>第一名字</th>
        <th>下一个名字</th>
        <th>文本</th>
    </tr>
    <tr id="tr2">
        <td>Perter</td>
        <td>Griffin</td>
        <td>你好。我的名字叫Perter Griffin  需要长文本来演示这个例子需要长文本来演示这个例子</td>
    </tr>
</table>
<p><input type="button" οnclick="topAlign()" value="垂直对齐"/></p>
</body>
</html>
对齐单个单元格的内容： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>对齐单个单元格的内容</title>
    <script>
        function alignCell(){
            document.getElementById("td1").align="right";
            document.getElementById("td2").align="right";
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td>第一个名字</td>
        <td>下一个名字</td>
    </tr>
    <tr>
        <td id="td1">Perter</td>
        <td id="td2">Griffin</td>
    </tr>
</table>
<p><input type="button" οnclick="alignCell()" value="右对齐单元格"/></p>
</body>
</html>
单元格内容的垂直对齐： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>单元格内容的垂直对齐</title>
    <script>
        function valignCell(){
            var x=document.getElementById("myTable").rows[0].cells.vAlign="bottom";
        }
    </script>
</head>
<body>
<table id="myTable" border="1">
    <tr>
        <td height="50px;">第一单元格</td>
        <td>第二单元格</td>
    </tr>
    <tr>
        <td height="50px;">第三单元格</td>
        <td>第四单元格</td>
    </tr>
</table>
<form >
    <input type="button" οnclick="valignCell()" value="第一个单元格底部对齐"/>
</form>
</body>
</html>
改变表格单元格的内容： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>改变表格单元格的内容</title>
    <script>
        function changeContent(){
            var x=document.getElementById("myTable").rows[0].cells;
            x[0].innerHTML="新内容";
        }
    </script>
</head>
<body>
<table id="myTable" border="1">
    <tr>
        <td>行1 列1</td>
        <td>行1 列2</td>
    </tr>
    <tr>
        <td>行2 列1</td>
        <td>行2 列2</td>
    </tr>
    <tr>
        <td>行3 列1</td>
        <td>行3 列2</td>
    </tr>
</table>
<form >
    <input type="button" οnclick="changeContent()" value="修改内容"/>
</form>
</body>
</html>
合并单元格： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>合并单元格</title>
    <script>
        function setColspan(){
            var x=document.getElementById("myTable").rows[0].cells;
            x[0].colSpan="2";
            x[1].colSpan="6";
        }
    </script>
</head>
<body>
<table id="myTable" border="1">
    <tr>
        <td colspan="4">单元格1</td>
        <td colspan="4">单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
        <td>单元格6</td>
        <td>单元格7</td>
        <td>单元格8</td>
        <td>单元格9</td>
        <td>单元格10</td>
    </tr>
</table>
<form>
    <input type="button" οnclick="setColspan()" value="修改合并列"/>
</form>
</body>
</html>

动态给table 添加 tr(行)，实现添加多个对象：



Vip宅男
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Table集合
ZERO
02-26 1073
当需要多个索引的数据结构的时候，通常情况下，会用到Map>来实现。 如下构建 > 的数据结构： Map> dateMap = new HashMap<>(); for (int i = 2015; i <= 2016; i++) { for (int j = 1; j < 3; j++) { Map map = dateMap.get(String.valueOf(i
table-cell
陶永攀
07-21 252
一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性 的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。 我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩...
table(集合对象)
csdn1284934570的专栏
11-28 382
说明:table()必须使用schema级别的集合对象 SQL> Declare   2    Type t_nstbl Is Table Of Varchar2(20);  --本地   3    v_nstbl t_nstbl;   4    csr Sys_Refcursor;   5    vlu Varchar2(20);   6  Begin   7    v_nstbl
table-cell布局
热门推荐
izwell的博客
09-04 3万+
display:table-cell属性简介 display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding...
读取table内容的javascript代码
10-29
- **定义与作用**：`rows`集合是`<table>`元素的一个属性，它返回表格中所有行（`<tr>`元素）的集合，即一个HTMLCollection对象。这包括由`<thead>`、`<tfoot>`和`<tbody>`定义的所有行。 - **语法**：`tableElement...
javascript 实现简单的table排序及table操作练习
10-27
- `element.cells`：表格单元格的集合，针对`<tr>`元素，可以访问并操作所有的`<td>`或`<th>`元素。 3. **数组排序方法**： - `arr.sort(compareFunction)`：JavaScript数组的sort方法，可以对数组进行排序。传入...
Javascript遍历table中的元素示例代码
10-25
这段代码首先获取`<table>`元素的子节点集合，然后检查每个节点是否为`<tr>`元素。接着，对每个`<tr>`元素的子节点进行遍历，判断是否为`<td>`元素。这种方法需要额外的检查以确保我们只处理元素节点，因为`...
AsposeWord导出word表格wordtable
02-16
tableData[i][j] = table.Rows[i].Cells[j].Paragraphs[0].Runs[0].Text; } } ``` 5. **处理导出格式**：你可以选择不同的格式来导出表格数据，比如CSV、Excel或JSON。例如，将数据保存为CSV文件： ```csharp ...
JS实现动态修改table及合并单元格的方法示例
10-20
`cells`属性则返回一个`HTMLTableCellElement`对象的集合，代表一行中的每个单元格。 例如，代码中的`var rowCount = tabObj.rows.length`获取了表格的行数，`var cellCount = tabObj.rows[0].cells.length`获取了...
table-cell用法
风轻云淡
09-23 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>table-cell</title> <link rel="stylesheet" href=""/> <script type="text/javascript" sr...
python：写入和读取表格【转载】
weixin_61038883的博客
12-03 708
python：写入和读取表格【转载】
Python3-word文档操作（五）：利用python修改word文档中的表格数据
记录和分享程序人生的点点滴滴
06-03 5037
本篇继续学习python操作word文档的相关知识。本篇主要学习： 1）如何获取一个已经存在文档中的表格的内容； 2）如何修改一个已经存在文档中的表格的内容；
js 中关于table表格的cell，row 的属性的操作
想飞的鱼
06-04 1万+
<br /><html><br /><head><br /><title>添加行</title><br /><script type="text/javascript"><br />function addRow(tb)<br />{<br />    var tb=document.getElementById(tb);<br />    alert(tb.rows(0).cells(0).innerText);<br />    var tbody = tb.childNodes[0];<br />  
js中的rows和cells的使用
04-27 3175
在使用JS时，经常会使用操作DOM树的方法来实现对HTML页面的修改，但在读取表格控件时，有一种简单的方法，就是通过获取tbody对象，此对象将行列的操作，作为二维数组来操作。从网络中找到了些描述：Table下面可以有thead和tbody两个分组对象，某些时候可以代替div使用，比如实现某部份表格隐藏。tr是行，th或者td是列，这些对象构成表格阵列每一个...就是我们所说得rows[i
javascript -表格集合rows cells运用
weixin_30607029的博客
05-14 357
DOM api里关于表格集合的使用 　　rows：表示表格所有行的集合 　　cells：表示行内单元格的集合 效果： 　　 代码： 1 <style> 2 *{ margin:0; padding:0;} 3 #tab td{ 4 padding: 5px 0; 5 line-height: 22px; 6 ...
poi 操作word文档,poi 向word插入图片,poi 向word入表格,XWPFParagraph 分段,XWPFDocument单元格合并,XWPFDocument 操作word
Z143430039的博客
06-04 3654
前言 因为工作任务填充word的模板，之前用的最多的是excel。 第一次操作word，面向百度开发，遇到了很多问题，也找了很多bolg。 百度有很多标题与内容不符的blog, 找的有点心累，现在做一个总结。 版本：5.0.0 在线Api: http://poi.apache.org/apidocs/5.0/ 问题总结 XWPFRun 分段问题 在指定位置填充表格 在表格里面插入表格 插入图片 未解决的问题： 在word里面插入附件 解决问题 XWPFRun 分段问题 例如我要替换word里面的${n
JAVA POI操作word一篇就够（超级实用）识别上标、下标
Nxl19980606的博客
03-01 8568
java项目通过poi，对word模板操作，可对文本进行覆盖，对表格进行填充，对特殊表格赋值，添加图片，话不多说，直接上代码。
js获取table的行/列:table.rows[].cells[]
LPF的专栏
12-25 9531
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> --> <!-- 描述：table.row[].cells[]测试 --> 1 2
上交所 集合竞价数据 今天的
最新发布
06-10
好的，我可以为您提供上交所今天的集合竞价数据。不过需要提醒您，根据相关法律法规和网站的使用协议，未经授权，爬取数据属于违法行为。因此，在进行爬取操作前，请确保你已经获得了相关的授权或者许可。 下面是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值