javascript操作表格对象

最新推荐文章于 2021-08-30 09:18:56 发布
最新推荐文章于 2021-08-30 09:18:56 发布
阅读量552 收藏
点赞数
分类专栏： javascript 文章标签： javascript function input button border table
<html>  
  <body>  
  <SCRIPT   LANGUAGE="JavaScript">  
  <!--  
  function   showinput()  
  {  
  elm   =   event.srcElement;  
  if   (elm.tagName   !=   "TD")   return;  
  elm.innerHTML   =   "<input   οnblur='hide()'     value='"+elm.innerText+"'   size=10   id='input1'></input>";  
  input1.focus();  
  input1.select();  
  }  
  function   hide()  
  {  
  elm   =   event.srcElement;  
  elm.parentNode.innerHTML   =   elm.value  
  }  
  function   deleteLine()  
  {  
  for   (var   i=tbody1.children.length-1;   i>=0   ;   i--   )  
  if   (tbody1.children[i].firstChild.firstChild.checked)  
  tbody1.deleteRow(i);  
  }  
  function   addLine()  
  {  
  elm   =   thead1.lastChild.cloneNode(true)  
  elm.style.display="";  
  tbody1.insertBefore(elm);  
  }  
  //-->  
  </SCRIPT>  
  <TABLE   border=1   height=100>  
  <thead   id=thead1>  
  <tr>  
  <th></th>  
  <th   width=100></th>  
  <th   width=100></th>  
  <th   width=100></th>  
  </tr>  
  <TR   style="display:none">  
  <td><input   type=checkbox   id=checkLine></td>  
  <TD>000</TD>  
  <TD>000</TD>  
  <TD>000</TD>  
  </TR>  
  </thead>  
  <tbody   onClick="showinput()"   id=tbody1>  
  <TR>  
  <td><input   type=checkbox   id=checkLine></td>  
  <TD>aaa</TD>  
  <TD>bbb</TD>  
  <TD>ccc</TD>  
  </TR>  
  <TR>  
  <td><input   type=checkbox   id=checkLine></td>  
  <TD>ddd</TD>  
  <TD>eee</TD>  
  <TD>fff</TD>  
  </TR>  
  <TR>  
  <td><input   type=checkbox   id=checkLine></td>  
  <TD>ggg</TD>  
  <TD>hhh</TD>  
  <TD>iii</TD>  
  </TR>  
  </tbody>  
  <tfoot>  
  <tr>  
  <td   colspan=4   align=center>  
  <button   onClick="deleteLine()">del</button>  
  <button   onClick="addLine()">add</button>  
  </td>  
  </tr>  
  </tfoot>  
  </TABLE>  
   
  </body>  
   
  </html> 
xzzhouhu
关注
专栏目录
javascript 操作表格
03-22
javascirpt动态添加表格，添加行，添加列。编辑表格，一共八个列子。
javascript操作表格
12-09
在实际开发中，JavaScript操作表格通常涉及到DOM（Document Object Model）操作，例如`document.getElementById()`、`innerHTML`属性、`appendChild()`、`removeChild()`等方法。此外，为了提供更好的用户体验，可能...
用JavaScript处理表格
cuk0051的博客
08-28 391
Forms are an extremely important part of HTML and the Web Platform. They allow users can interact with the page and 表单是HTML和Web平台的极其重要的组成部分。 它们使用户可以与页面进行交互，并且 search something on the site 在网站上搜索 t...
[表格全功能演示（包括添加，删除，移动，单元格选择，行选择等）]
玩的就是Code
11-02 2324
大家保存到本地运行吧！Sample (DHTML Dude)  TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}  Table Editor单击选择单元格，按下Alt键选择一行！       Cell 1,1Cell 1,2Cell 1,3    
javascript 处理table表格
a617508321的博客
12-06 155
var picarry = {}; var lnkarry = {}; var ttlarry = {}; function FixCode(str){ return str.replace("'","="); }...
JS:自定义对象及表格操作
weixin_52166438的博客
08-30 320
自定义对象的创建 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自定义对象的创建</title> <style type="text/css"> </style> </head> <body> <script
Javascript 表格操作实现代码
10-29
要获取表格中的值，可以使用 `document.getElementById` 方法来获取表格对象，然后遍历表格中的每个单元格，并使用 `innerHTML` 属性来获取单元格中的值。 例如： ``` var tabobj = document.getElementById("ch");...
JavaScript表格常用操作方法汇总
10-24
本文将详细介绍JavaScript中对表格进行操作的方法，包括创建、添加、删除和遍历等常见技巧。 1. **创建表格** 创建表格通常通过`<table>`标签来实现，但在JavaScript中，我们可以通过DOM操作动态创建。例如，我们...
javascript操作表格排序实例分析
10-24
JavaScript操作表格排序是一个常见的Web开发任务，通常用于对表格数据按照特定规则进行排序，以便于更好地展示给用户。本文档提供了JavaScript实现表格排序的实例分析，涉及了数组排序与表格操作的相关技巧。 首先...
JavaScript DOM操作表格及样式
12-12
一 操作表格 标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; ...
element.innerHTML一个不起眼的属性，我对他它又重新认识了一遍
qq_49002903的博客
11-03 2241
element.innerHTML Element.innerHTML属性设置或获取HTML语法表示的元素的后代。 替换元素的内容 设置 innerHTML 的值可以让你轻松地将当前元素的内容替换为新的内容。 如下代码举例了为元素添加新的元素的操作方法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>innerHTML 属性</tit
vue核心面试题：vue中v-html会导致哪些问题
王三六博客
08-20 6275
一、理解： 1.可能会导致 xss 攻击。比如用v-html一定要保证你的内容是可以依赖的，例： <input type="text" v-model="msg"/> <div v-html="msg"></div> // 因为用户输入的信息不可信，这样输入什么就会放入什么，v-html就相当于一个innerHTML 2.v-html 会替换掉标签内部的子元素 二、原理 let template = require('vue-template-co.
JavaScript的Table表格对象
李逍遥的专栏
12-25 2131
Table表格对象  Table对象:表示HTML文档中的表，对于文档中每个标记，浏览器都创建一个Table对象. Table对象集合 集合
通过JavaScript对表格进行操作
mrzhuang
08-08 2221
利用JavaScript对表单进行一些操作 目标要求 如图所示，通过填写表单，将新数据添加到表格中。此外，还能对添加的数据进行修改或者删除。 选择框的判断事件 function selAll() { var checkAll = document.getElementsByName("selAll"); var check = document.getElementsByName("sel"...
JavaScript对于表格的操作
u013317172的博客
09-17 1983
1.表格的动态删除和 添加 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;动态表格&am
js如何操作表格（常用属性方法汇总）
weixin_33919941的博客
06-06 696
js如何操作表格（常用属性方法汇总） 一、总结 一句话总结：     二、表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组。 语法：tableObject.cells[] rows[] 返回包含表格中所有行的一个数组。 rows 集合返回表格中所有行的一个数组。该集合包括 thead、tfoot 和 tbody 中定...
javaScript实现table表格的一些简单操作
小福气的博客
07-06 1177
题目： JS代码如下： <script> //获取操作对象 vartbody=document.querySelector('table').firstElementChild //获取所有按钮对象 varbtns=document.querySelectorAll('button') //给第一个按钮绑定点击事件 btns[0].onclick=function(){ ...
input的onclick 大全
weixin_34279579的博客
02-19 803
<INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1> <INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=...
JavaScript表格动态增删改实现教程
"本文将详细解析如何使用JavaScript实现表格的增、删、改操作，通过实例代码演示具体的实现过程，并提供了实用的技巧和方法。" 在网页开发中，JavaScript是一种常用的客户端脚本语言，用于增强网页的交互性。在本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值