`

js学习之Table,TableHeader,TableRow,TableData对象

 
阅读更多
Table,TableHeader,TableRow,TableData对象


更改表格边缘宽度代码来自w3school


ps:TableRow应该就是tr标签,TableData应该就是td标签,tableHeader应该是th标签,这也是我的推测,没去研究,反正知道怎么用就Ok了,哎!感觉自己不求甚解啊!  

<html>
<head>
<script type="text/javascript">
function changeBorder()
  {
  document.getElementById('myTable').border="10"
  }
</script>
</head>
<body>

<table border="1" id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="changeBorder()" value="改变边框">

</body>
</html>


更改表格cellPadding和cellSpacing代码来自w3school 


<html>
<head>
<script type="text/javascript">
function padding()
  {
  document.getElementById('myTable').cellPadding="15"
  }
function spacing()
  {
  document.getElementById('myTable').cellSpacing="15"
  }
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="padding()" value="改变 Cellpadding">
<input type="button" onclick="spacing()" value="改变 Cellspacing">

</body>
</html>


ps:cellPadding是td与tr之间的间隙,cellSpacing是tr与table之间的间隙,个人感觉效果就是这样的,不知道解释错了没,自己可以测一下,免得我误人子弟,毁人前途


规定表格的外部边框代码来自w3school 


<html>
<head>
<script type="text/javascript">
function aboveFrames()
  {
  document.getElementById('myTable').frame="above"
  }
function belowFrames()
  {
  document.getElementById('myTable').frame="below"
  }
</script>
</head>
<body>

<table id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="aboveFrames()" value="显示上边框">
<input type="button" onclick="belowFrames()" value="显示下边框">

</body>
</html>



规定表格的内部边框代码来自w3school 


<html>
<head>
<script type="text/javascript">
function rowRules()
  {
  document.getElementById('myTable').rules="rows"
  }
function colRules()
  {
document.getElementById('myTable').rules="cols"
  }
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="rowRules()" value="仅显示行边框">
<input type="button" onclick="colRules()" value="仅显示列边框">

</body>
</html>




显示表格的第一行的innerHtml代码来自w3school 


<html>
<head>
<script type="text/javascript">
function showRow()
  {
  alert(document.getElementById('myTable').rows[0].innerHTML)
  }
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="showRow()" value="显示第一行的 innerHTML">

</body>
</html>



表格单元的InnterHtml代码来自w3school 


<html>
<head>
<script type="text/javascript">
function cell()
  {
  var x=document.getElementById('myTable').rows[0].cells;
  alert(x[0].innerHTML);
  }
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br />
<input type="button" onclick="cell()" value="显示第一个单元">

</body>
</html>



为表格创建标题代码来自w3school 


<html>
<head>
<script type="text/javascript">
function createCaption()
  {
  var x=document.getElementById('myTable').createCaption()
  x.innerHTML="我的表格标题"
  }
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="createCaption()" value="创建标题">

</body>
</html>



从表格删除行代码来自w3school 


<html>
<head>
<script type="text/javascript">
function deleteRow(r)
  {
  var i=r.parentNode.parentNode.rowIndex
  document.getElementById('myTable').deleteRow(i)
  }
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
  <td>Row 1</td>
  <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
</table>

</body>
</html>



向表格添加新行,然后向其添加内容代码来自w3school 


<html>
<head>
<script type="text/javascript">
function insRow()
  {
  var x=document.getElementById('myTable').insertRow(0)
  var y=x.insertCell(0)
  var z=x.insertCell(1)
  y.innerHTML="NEW CELL1"
  z.innerHTML="NEW CELL2"
  }
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="插入行">

</body>
</html>



向一个已有的行中插入单元格代码来自w3school 


<html>
<head>
<script type="text/javascript">
function insCell()
  {
  var x=document.getElementById('tr2').insertCell(0)
  x.innerHTML="John"
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="insCell()" value="插入单元">

</body>
</html>




对齐行中的单元格内容代码来自w3school 


<html>
<head>
<script type="text/javascript">
function leftAlign()
  {
  document.getElementById('header').align="left";
  }
</script>
</head>
<body>

<table width="100%" border="1">
<tr id="header">
<th>名</th>
<th>姓</th>
</tr>
<tr>
<td>John</td>
<td>Adams</td>
</tr>
</table>
<br />
<input type="button" onclick="leftAlign()" value="左对齐表格行" />

</body>
</html>


垂直对齐行中的单元格内容代码来自w3school 


<html>
<head>
<script type="text/javascript">
function topAlign()
  {
  document.getElementById('tr2').vAlign="top";
  }
</script>
</head>
<body>

<table width="50%" border="1">
<tr id="tr1">
<th>名</th>
<th>姓</th>
<th>文本</th>
</tr>
<tr id="tr2">
<td>John</td>
<td>Adams</td>
<td>你们好。我是名字是 John Adams。
在本例中，我需要一段长的文本。
在本例中，我需要一段长的文本。
在本例中，我需要一段长的文本。</td>
</tr>
</table>
<br />
<input type="button" onclick="topAlign()" value="上对齐表格行" />

</body>
</html>



对齐单元格中的内容代码来自w3school 


<html>
<head>
<script type="text/javascript">
function alignCell()
{
document.getElementById('td1').align="right"
}
</script>
</head>
<body>

<table border="1">
<tr>
<th>-----名-----</th>
<th>-----姓-----</th>
</tr>
<tr>
<td id="td1">John</td>
<td>Adams</td>
</tr>
</table>

<form>
<input type="button" onclick="alignCell()" 
value="对齐 'John' 单元格" />
</form>

</body>
</html>


垂直对齐单元格中的内容代码来自w3school 



<html>
<head>
<script type="text/javascript">
function topAlign()
  {
  document.getElementById('td1').vAlign="top";
  document.getElementById('td2').vAlign="top";
  document.getElementById('td3').vAlign="top";
  }
</script>
</head>
<body>

<table width="50%" border="1">
<tr>
<th>名</th>
<th>姓</th>
<th>文本</th>
</tr>
<tr>
<td id="td1">John</td>
<td id="td2">Adams</td>
<td id="td3">你们好。我是名字是 John Adams。
在本例中，我需要一段长的文本。
在本例中，我需要一段长的文本。
在本例中，我需要一段长的文本。</td>
</tr>
</table>
<br />
<input type="button" onclick="topAlign()" value="上对齐表格单元" />

</body>
</html>



改变表格单元格中的内容代码来自w3school 


<html>
<head>
<script type="text/javascript">
function changeContent()
{
var x=document.getElementById('myTable').rows[0].cells
x[0].innerHTML="新的内容"
}
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<form>
<input type="button" onclick="changeContent()" value="改变内容">
</form>
</body>

</html>


更改表格横跨的列数代码来自w3school 


<html>
<head>
<script type="text/javascript">
function changeColSpan()
  {
  document.getElementById("td1").colSpan="2";
  }
</script>
</head>
<body>

<table border="1">
<tr>
<th>名</th>
<th>姓</th>
</tr>
<tr>
<td id="td1">John</td>
<td id="td2">Adams</td>
</tr>
</table>
<br />
<input type="button" onclick=changeColSpan() value="改变 colspan" />

</body>
</html>


分享到：
| js学习之Option和Select对象以及screen对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js代码操作table排序功能

    var data = rows.map(row =&gt; Array.from(row.cells).map(cell =&gt; cell.textContent)); ``` 3. **实现排序功能** 当用户点击表头时，我们需要根据点击的列索引执行排序。这里可以给每个`&lt;th&gt;`元素添加点击事件...

    jquery.table2excel.js

    “jquery.table2excel.min.js”是Table2Excel插件的压缩包，主要包含核心的JavaScript代码。这个轻量级的插件通过jQuery选择器选取HTML表格，然后将其内容转换成Excel格式，让用户可以一键下载。由于其基于浏览器的...

    javascript 操作table的特性.docx

    ### JavaScript操作Table的特性 #### 一、概述 在Web开发中，`&lt;table&gt;`元素是一种常见的HTML结构，用于展示数据。随着JavaScript的发展，我们可以通过脚本来动态地控制表格的行为和外观，从而实现更加丰富的用户...

    html+table实现注册页面

    HTML表格由`&lt;table&gt;`、`&lt;tr&gt;`（table row）、`&lt;th&gt;`（table header）和`&lt;td&gt;`（table data cell）等元素组成。在创建注册页面时，通常会用表格来组织输入字段，如用户名、密码、电子邮件等。 1. `&lt;table&gt;`元素：这...

    【JavaScript源代码】element table多层嵌套显示的实践.docx

    `:data`属性用于绑定表格的数据源，`row-key`属性用于指定每行数据的唯一标识，这样可以正确地跟踪和渲染表格。`:span-method`属性接受一个函数`arraySpanMethod`，这个函数用于计算行和列的合并。在多层嵌套的表格...

    react-ReactTable一个快速轻量级固执己见的React数据表格

    查看压缩包中的`tannerlinsley-react-table-1571bfa`，该文件包含了ReactTable的源码和示例项目，可以作为学习和参考的资源。通过阅读源码和运行示例，你可以更深入地了解ReactTable的工作原理和各种用法。 总的来...

    JQuery table改变列的宽度

    一个表格由`&lt;table&gt;`元素开始，包含若干行`&lt;tr&gt;`（table row），每一行又包含若干个单元格`&lt;td&gt;`（table data cell）或表头单元格`&lt;th&gt;`（table header cell）。在jQuery中，我们可以利用选择器精确地定位到我们需要...

    JavaScript获取table中某一列的值的方法

    在HTML表格中，行被称为tr（table row），而单元格则被称为td（table data）。每个td都可以通过其父级tr中的索引位置来访问。此外，th（table header）元素用来定义表格中的表头。 通过上述提供的HTML和JavaScript...

    html2.rar_Table

    3. `&lt;td&gt;`：表示表格数据（Table Data Cell），用于存储表格内的具体数据。它在`&lt;tr&gt;`内使用，可以设置`rowspan`和`colspan`属性来合并行或列。 4. `&lt;th&gt;`：表示表格头（Table Header Cell），通常用于显示列名或...

    javascript table排序 这个更简单了，不用改变现在的表格结构

    let tableData = []; let rows = document.querySelectorAll('table tbody tr'); rows.forEach(row =&gt; { let rowData = []; row.querySelectorAll('td').forEach(cell =&gt; { rowData.push(cell.textContent); });...

    php后端处理Excel.docx

    tableData.push(row); } console.log("表头：", data.header); console.log("数据：", tableData); }).catch(error =&gt; { console.error(error); }); } ``` 通过以上步骤，可以实现基于 Vue 及 iview 的页面中...

    element 合并表格头部

    这里的`tableData`是包含表格数据的数组，`prop`用于指定数据对象中的属性，`label`是显示的列标题，`width`定义了列的宽度。 要实现“合并表格头部”的功能，我们需要利用`table-column`组件的`type`属性和`span-...

    纯javascript解析CSV文件使用并转成HTML表格

    在JavaScript开发中，处理数据是常见的任务之一，特别是在构建网页应用时。CSV（Comma Separated Values）是一种广泛用于存储和传输数据的格式，因为它的简单性和通用性。本篇文章将详细探讨如何使用纯JavaScript...

    vue.js表格实现表头首行固定代码.zip

    &lt;tr v-for="row in data" :key="row.id"&gt; &lt;!-- 数据行在这里 --&gt; &lt;/table&gt; ``` 在`script`部分，我们将声明数据和方法。`data`属性用于存储表格数据，而`mounted`生命周期钩子则用于在组件挂载后执行一些...

    【JavaScript源代码】element表格行列拖拽的实现示例.docx

    &lt;el-table :data="tableData" border row-key="id" align="left"&gt; &lt;el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"&gt; &lt;/el-table-column&gt;...

    采用Table CSS实现的TabPane选项卡.rar

    Table CSS指的是使用表格相关的类名（如`.table`, `.table-row`, `.table-cell`等）来模拟表格的布局，使得元素可以自适应排列。在这个例子中，我们可以用这些类名来调整选项卡头和内容区域的布局。 ```css .tab-...

    sheetjs xlsx 源码

    SheetJS 是一个强大的开源库，专门用于处理电子表格数据，特别是在JavaScript环境中操作Excel文件。它提供了`xlsx`模块，能够方便地读取、写入和转换Excel文件（.xlsx 和 .xls 格式）。这个库在Web应用、数据处理和...

    Bootstrap table使用方法记录

    $('#table').on('click-row.bs.table', function(e, row, $element) { alert('点击了行' + row.id); }); ``` 模态框 Bootstrap Table 还提供了模态框功能，可以用于显示详细信息或编辑数据。下面是一个简单的示例...

    前端 vue2 读表格数据

    (header, index) in Object.keys(tableData[0])" :key="index"&gt;{{ header }} &lt;tr v-for="row in tableData" :key="row.id"&gt; (value, index) in row" :key="index"&gt;{{ value }} &lt;/table&gt; ``` 以上...

    基于vue element ui 的动态table组件

    Vue.js作为一个轻量级且功能强大的JavaScript框架，被广泛用于构建用户界面。Element UI则是Vue.js的一个热门UI组件库，它提供了丰富的预设组件，使得开发者能够快速搭建出美观且响应式的界面。本篇文章将深入探讨...

Magicbox
Global site tag (gtag.js) - Google Analytics