`

JS简单操作table

JSPJavaScriptHTML 
阅读更多

这个页面是点击表格弹出表格内文本的js做法

 

<html>

  <head>

    <title>My JSP 'failure.jsp' starting page</title>

  </head>

  <script type="text/javascript">

 

   function alt(){

var obj=document.getElementById("tb").getElementsByTagName("td");

for(var i=0;i<obj.length;i++){

obj[i].onclick=function(){

alert(this.innerText);

};

}

 

   }

  </script>

  <body>

   <table onclick="alt()" id="tb" border="1" cellpadding="0" cellspacing="0" width="100%">

   <tr bgcolor="yellow">

   <td>编号</td>

   <td>姓名</td>

   <td>性别</td>

   <td>年龄</td>

   </tr>

  

<tr>

<td bgcolor="pink">1</td>

<td>aaaa</td>

<td>G </td>

<td>21</td>

</tr>

  

<tr>

<td bgcolor="pink">2</td>

<td>vasd</td>

<td>M </td>

<td>23</td>

</tr>

  

<tr>

<td bgcolor="pink">3</td>

<td>ewrww</td>

<td>M </td>

<td>26</td>

</tr>

  

<tr>

<td bgcolor="pink">4</td>

<td>qqw</td>

<td>G </td>

<td>24</td>

</tr>

  

   </table>

  </body>

</html>


 

 

分享到：
| 使用效果(Effect)
评论
发表评论

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

相关推荐

    js操作table导出excel

    在JavaScript开发中，有时我们需要将HTML表格...这里我们主要介绍`FileSaver.js`，因为它更简单易用。 1. **引入依赖**：首先，你需要在项目中引入`FileSaver.js`库。你可以通过CDN链接或者下载后引入本地。 ```html ...

    js代码操作table排序功能

    在JavaScript中，对HTML表格（`&lt;table&gt;`）进行排序是一项常见的需求，特别是在动态数据展示和用户交互的应用中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们要理解HTML表格的基本结构，...

    【原创】JS操作table--XTable类

    低调发布，因为是小样版本，集成了几个简单的方法...写此类的目的一个事方便操作table二是可以引入ajax做无刷新分页啥的 当然这些还没做 只是最简单实用的方法 争取尽快完善，引入ajax元素。尽请期待。 demo地址： ...

    js 操作 增加删除Table行

    本文将深入探讨如何使用JavaScript来动态地增加和删除表格（Table）的行。 首先，我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素、`&lt;tr&gt;`（表格行）元素、`&lt;td&gt;`（表格数据单元格）元素组成。如果...

    bootstrap table editable js

    Bootstrap Table Editable JS 是一个基于Bootstrap框架的动态表格插件，它允许用户在表格的单元格内进行编辑，提供了一种交互式的数据展示和管理方式。这个压缩包包含以下三个核心文件： 1. **bootstrap-editable....

    BootStrap-table.js 官网下载

    Bootstrap-table.js 是一个基于Bootstrap框架的前端数据展示插件，它允许用户在网页上创建功能丰富的、可操作的表格。这个插件的核心理念是提供一个简单而强大的方式来展示动态数据，同时保持良好的用户体验和响应式...

    一个用于将JSON数据转换为Table的JavaScript库

    为了实现这一功能，一个名为“json-table-converter”的JavaScript库应运而生。 这个库的核心功能是将JSON对象转换为HTML表格，它提供了一种简单、高效的方法来处理这种数据转换。开发者无需手动编写繁琐的DOM操作...

    js动态创建table点击按钮dom table tr添加操作

    本主题主要聚焦于如何利用JavaScript动态创建一个包含表格（table）的DOM结构，并且在表格行（tr）中添加可点击的按钮。这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要...

    js实现点击table表头字段带箭头标示

    综上所述，实现“点击table表头字段带箭头标示”的功能涉及到了JavaScript事件处理、DOM操作、数组排序以及UI交互设计。这不仅是提高用户体验的重要手段，也是前端开发者必备的技能之一。通过不断实践和学习，我们...

    javascript 操作 Table 排序

    在JavaScript中，操作HTML表格（Table）进行排序是一项常见的任务，尤其在动态数据展示和用户交互中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML表格的基本结构。一个HTML...

    JS操作table

    在JavaScript（JS）中操作HTML表格是Web开发中常见的任务，尤其在动态数据展示和用户交互方面。本文将深入探讨如何使用JavaScript进行基本的表格操作，包括创建、修改、删除和遍历表格元素。 首先，我们需要了解...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    在Bootstrap Table中集成`bootstrap-editable`插件，首先要确保已经引入了必要的CSS和JavaScript文件。这些文件通常包括Bootstrap的核心库、jQuery、bootstrap-table主文件，以及bootstrap-table-editable.js。确保...

    bootstrap-table.js

    `bootstrap-table.js` 是JavaScript文件，它是Bootstrap Table的功能实现部分。这个文件提供了各种方法和事件，如数据加载、排序、过滤、分页等，使得开发者能够轻松地在网页上创建交互式表格。通过引入这个JS文件，...

    JS代码实现table数据分页效果

    本文将详细介绍如何使用JavaScript（JS）来实现表格（table）数据的分页效果，分为两个部分进行讲解。 ### 第一部分：简单分页 这个部分主要实现的是基础的页数翻页功能。首先，我们需要一个包含表格数据的HTML...

    tableExport.min.js、xlsx.core.min.zip

    使用这个插件，开发者可以添加一个简单的按钮或通过JavaScript触发导出操作，使得用户能够轻松地导出表格内容。 接下来是“xlsx.core.min.js”，这是XLSX.js库的一个精简版本，用于处理和创建Excel文件。XLSX.js库...

    js创建table表格

    在JavaScript中创建动态的HTML...JavaScript的灵活性和强大的DOM操作能力使得动态生成表格成为可能，无论是在教学还是实际项目中都非常有用。在学习和实践中，不断熟悉并应用这些知识，你将成为一个出色的前端开发者。

    javascript table 增加删除行,巧妙实现

    在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    前台js将table转为Excel表格下载.rar

    综上所述，"前台js将table转为Excel表格下载.rar"中的实现涉及到前端JavaScript技术，包括DOM操作、CSV格式转换、Blob对象以及创建下载链接等步骤，这些知识点对于开发具有数据导出功能的Web应用至关重要。

    js简单表格操作

    在JavaScript（简称JS）中，表格操作是网页动态交互中常见的功能，主要用于处理HTML中的`&lt;table&gt;`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作，帮助你创建更加灵活和交互性强的数据展示界面。 首先...

    js 实现 table 行排序

    一个简单的表格由 `&lt;table&gt;` 开始，包含多个 `&lt;tr&gt;`（行）元素，每个行中又有若干个 `&lt;td&gt;`（单元格）元素。为了实现排序，我们需要为表格的表头（`&lt;th&gt;`）添加点击事件监听器，以便在用户点击时触发排序操作。 ...

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