Table cells 集合
Table 对象定义和用法
cells 集合返回表格中所有 <td> 或 <th> 元素。
语法
tableObject.cells
属性
属性 | 描述 |
---|---|
length | 返回集合中 <td> 或 <th> 元素的数目。 |
方法
方法 | 描述 |
---|---|
[name_or_index] | 一个整数,指定元素检索位置(从0开始) |
item(name_or_index) | 返回集合中的指定索引的元素 |
namedItem(name) | 返回集合中指定名称索引的元素索引 |
浏览器支持
所有主要浏览器都支持 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>