dom动态修改表格

最新推荐文章于 2022-01-25 17:37:43 发布
最新推荐文章于 2022-01-25 17:37:43 发布
阅读量835 收藏
点赞数
分类专栏： JAVASCRIPT学习笔记 文章标签： table input html border action tags
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangxiaojun9238/article/details/7319691
版权 
<html>
 
<head>
 
<title>(X)HTML Table Inspector</title>
 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
</head>
 
<body>
 
<table border="1" frame="box" id="testTable">
 
<caption>Test Table</caption>
 
<thead>
 
     <tr>
 
        <th>Product</th>
 
        <th>SKU</th>
 
        <th>Price</th>
 
    </tr>
 
</thead>
 
<!-- tfoot does indeed come before tbody  -->
 
<tfoot>
 
 <tr>
 
      <th colspan="3">This has been an HTML 4 table example, thanks for
 
 reading</th>
 
 </tr>
 
</tfoot>
 
<tbody>
 
  <tr>
 
      <th colspan="3" align="center">Robots</th>
 
  </tr>
 
  <tr>
 
      <td>Trainer Robot</td>
 
      <td>TR-456</td>
 
      <td>$56,000</td>
 
  </tr>
 
  <tr>
 
      <td>Guard Dog Robot</td>
 
      <td>SEC-559</td>
 
      <td>$5,000</td>
 
  </tr>
 
  <tr>
 
      <td>Friend Robot</td>
 
      <td>AG-343</td>
 
      <td>$124,000</td>
 
  </tr>
 
</tbody>
 
<tbody>
 
  <tr>
 
      <th colspan="3" align="center">Jet Packs</th>
 
  </tr>
 
 
 
  <tr>
 
      <td>Economy</td>
 
      <td>JP-3455E6</td>
 
      <td>$6,000</td>
 
  </tr>
 
 
 
  <tr>
 
      <td>Deluxe</td>
 
      <td>JP-9999d</td>
 
      <td>$15,000</td>
 
  </tr>
 
</tbody>
 
</table>
 
<br clear="all" /><hr /><br clear="all" />
 
<script type="text/javascript"> 
 
   var theTable = document.getElementById('testTable');
 
</script>
 
<form action="#" method="get">
 
<strong>Alignment:</strong> 
 
      <select οnchange="theTable.align = this.options[this.selectedIndex].text;">
 
            <option>left</option>
 
            <option>center</option>
 
            <option>right</option>
 
      </select>
 
<strong>Background Color:</strong> 
 
      <select οnchange="theTable.bgColor =
 
 this.options[this.selectedIndex].text;">
 
            <option>white</option>
 
            <option>red</option>
 
            <option>blue</option>
 
            <option>yellow</option>
 
            <option>orange</option>
 
            <option>green</option>
 
            <option>black</option>
 
     </select>
 
 
 
<strong>Frames:</strong> 
 
     <select οnchange="theTable.frame = this.options[this.selectedIndex].text;">
 
            <option>above</option>
 
            <option>below</option>
 
            <option>border</option>
 
            <option>box</option>
 
            <option>hsides</option>
 
            <option>vsides</option>
 
            <option>lhs</option>
 
            <option>rhs</option>
 
            <option>void</option>
 
     </select>
 
<strong>Rules:</strong> 
 
     <select οnchange="theTable.rules = this.options[this.selectedIndex].text;">
 
            <option>all</option>
 
            <option>cols</option>
 
            <option>groups</option>
 
            <option>none</option>
 
            <option>rows</option>
 
     </select>
 
<br /><br />
 
<strong>Border:</strong>
 
<input type="text" size="2" maxlength="2" value="1" οnchange="theTable.border =
 
 this.value;" />
 
<strong>Cell Padding:</strong>
 
<input type="text" size="2" maxlength="2" value="1" οnchange="theTable.cellPadding
 
 = this.value;" />
 
<strong>Cell Spacing:</strong>
 
<input type="text" size="2" maxlength="2" value="1" οnchange="theTable.cellSpacing
 
 = this.value;" />
 
</form>
 
</body>
<script type="text/javascript"> 
 
<!--
 
   var theTable = document.getElementById('testTable');
 
   document.writeln("<pre>");
 
   document.writeln("Overall table rows="+theTable.rows.length);
 
   document.writeln("Number of tbody tags="+theTable.tBodies.length);
 
   for (i = 0; i < theTable.tBodies.length; i++)
 
   document.writeln("\t tbody["+i+"] number of rows = "+theTable.tBodies[i].rows.length);
 
 
 
   document.writeln("Rows in tfoot tag="+theTable.tFoot.rows.length);
 
   document.writeln("Rows in thead tag="+theTable.tHead.rows.length);
 
   document.writeln("</pre>");
 
//-->
 
</script>
 
</html>

 
yangxiaojun9238
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js对表格数据的增删改
04-04
NULL 博文链接：https://rain-08.iteye.com/blog/1421852
jQuery 实现双击编辑表格功能
12-09
先给大家展示下效果图： 下面用简单方法实现的简单表格编辑功能: 简单的HTML代码略过了,下面是js实现过程 [removed] <span xss=removed>$(".tables").on("dblclick","td",function(){ if($(this).children("input").length>0){ return false; } var tdDom = $(this); //保存初始值 var tdPreText = $(this).text(); //给td设置宽度和给input设置宽度并赋值 $(this)
使用JavaScript和DOM动态创建表格
10-19
使用JavaScript和DOM动态创建表格
前端：表格内容的添加和删除
05-13
实现将输入的信息添加到表格、删除表格内容的功能，适合前端初学者巩固DOM相关知识。涉及全选、反选，几种表单标签的使用。
JS实现为表格动态添加标题的方法
10-24
主要介绍了JS实现为表格动态添加标题的方法,涉及javascript中createCaption方法添加标题的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js表格操作，DOM实现数据动态增删查改
12-02
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
Javascript实例教程:DOM方法创建和修改表格
luyuhui0209的专栏
10-12 1010
元素是HTML中最复杂的结构之一。要想创建表格，一般都必须涉及表示表格行、单元格、表头等方面的标签。由于涉及的标签多，因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码。假设我们要使用DOM来创建下面的HTML表格： Cell 1,1 Cell 2,1
采用DOM进行表格的修改操作
weixin_30727835的博客
08-31 167
2015-08-31 <html> <head> <title>采用DOM进行表格的修改操作</title> <script language="JavaScript"> function addRow() { var tab=document.getElementbyId("mytab");//取...
使用DOM操作表格
weixin_42044486的博客
11-13 340
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt;     &lt;meta charset="UTF-8" /&gt;     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
11-21表格渲染.html
11-22
利用html，css，js制作修改的动态表格渲染，包括添加删除和选中，希望能帮助到和我一样的新手，生活不易，互相帮助，多点关心多点爱
DOM 操作表格及样式
majinawei05的博客
09-12 447
登录 | 注册 收藏成功 确定 收藏失败，请重新收藏 确定 标题 标题不能为空 网址 标签 摘要
JS基础-尚硅谷-添加删除记录练习-视频p103-105
qq_43624193的博客
01-25 1473
视频链接： JS基础-尚硅谷视频p105 基础版本： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>添加删除记录练习</title> <script type="text/javascript"> /** * 删除tr的响应函数 */ function delA(){ /** * 点击超链接之后 超链接会
web前端之DOM操作——Tab切换栏的使用
weixin_46820017的博客
06-12 1591
Tab切换栏的详细解析 下面给出京东某一页面的tab栏页面切换： 举例引入：鼠标悬停时，current元素的背景变色 本段我们先举一个例子，因为这里用到了排他思想。对于理解tab切换，很有帮助。 完整的代码实现： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>
用DOM动态控制表格
JarvisLau的博客
04-14 216
pageEncoding="UTF-8"%> 用DOM动态控制表格 counter = 1; // 插入数据 function insertData() { var oStudentsTable = document.getElementById("students"); var oTrHan
(转)使用JavaScript和DOM动态创建表格
weixin_30823227的博客
11-28 360
第一次翻译技术文章，本身英语水平很烂，翻译的也是自己刚开始学习的技术，所以能勉强看懂英文的话都要尽量读 原文 而不要看我的翻译，免得被误导。阅读原文简介　　这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例，比...
HTML事件绑定
yangxiaojun9238的专栏
03-05 889
HTML Event Bindings HTML Event Bindings <form action="#" method="get" onreset="alert('Form reset');" onsubmit="alert('Form submit');return false;"> onblur:
javascript dom操作表格
最新发布
04-06
JavaScript DOM操作表格是指使用JavaScript操作HTML文档中的表格元素，包括获取表格数据、修改表格样式、添加或删除表格行列等操作。通过使用DOM方法和属性，可以轻松地实现对表格的各种操作，提高页面交互、动态...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值