jqTable 添加删除一列

最新推荐文章于 2022-06-12 22:14:48 发布
原创 最新推荐文章于 2022-06-12 22:14:48 发布 · 3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍使用JQuery进行表格操作的方法，包括鼠标悬停时改变行背景色、设置奇偶行不同颜色及动态控制列的显示与隐藏等功能实现。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">    
<script type="text/javascript" src="${rc.contextPath}/scripts/common/jquery/jquery-1.8.2.js"></script>
<title>JQUERY TABLE</title>
<style>
table
{
    border-collapse: collapse;
    border-spacing: 0;
    margin-right: auto;
    margin-left: auto;
    width: 800px;
 }
 th, td
 {
    border: 1px solid #b5d6e6;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    height: 20px;
 }
 th
 {
    background-color: Gray;
 }   
 
 .hover
{
  background-color: #cccc00;
}
.odd{ background-color: #bbf;}
.even{ background-color:#ffc; }
</style>
<script>
$(document).ready(function () {
    //鼠标移动到行变色,单独建立css类hover
    //tr:gt(0):表示获取大于 tr index 为0 的所有tr，即不包括表头
    $("#table1 tr:gt(0)").hover(
    function () { $(this).addClass("hover") },
    function () { $(this).removeClass("hover") })
});


$(document).ready(function () {
    //奇偶行不同颜色
    $("#table2 tbody tr:odd").addClass("odd"),
    $("#table2 tbody tr:even").addClass("even")
    //或者
    //$("#table2 tbody tr:odd").css("background-color", "#bbf"),
    //$("#table2 tbody tr:even").css("background-color", "#ffc")
});
$(document).ready(function () {
   $("#addcl").click(function(){
    if($("#addcl").val()=="删除第二列"){
  $("#table3 tr th:eq(1)").hide();
  $("#table3 tr td:nth-child(2)").hide();
  $("#addcl").val("添加第二列");
    }
     else{
  $("#table3 tr th:eq(1)").css("display", "");
          $("#table3 tr td:nth-child(2)").css("display", "");
 $("#addcl").val("删除第二列");
    }
   });
  
      });
</script>
</head>
<body>
  <table id="table1">
        <tr>
            <th style="width: 160px;">表头一</th>
            <th style="width: 160px;">表头二 </th>
            <th style="width: 160px;">表头三</th>
            <th style="width: 160px;">表头四</th>
            <th style="width: 160px;">表头五</th>
        </tr>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
            <td>第一行第四列</td>
            <td>第一行第五列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
            <td>第二行第四列</td>
            <td>第二行第五列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
            <td>第三行第四列</td>
            <td>第三行第五列</td>
        </tr>
        <tr>
            <td>第四行第一列</td>
            <td>第四行第二列</td>
            <td>第四行第三列</td>
            <td>第四行第四列</td>
            <td>第四行第五列</td>
        </tr>
</table>
<br/>
  <table id="table2">
        <tr>
            <th style="width: 160px;">表头一</th>
            <th style="width: 160px;">表头二 </th>
            <th style="width: 160px;">表头三</th>
            <th style="width: 160px;">表头四</th>
            <th style="width: 160px;">表头五</th>
        </tr>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
            <td>第一行第四列</td>
            <td>第一行第五列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
            <td>第二行第四列</td>
            <td>第二行第五列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
            <td>第三行第四列</td>
            <td>第三行第五列</td>
        </tr>
        <tr>
            <td>第四行第一列</td>
            <td>第四行第二列</td>
            <td>第四行第三列</td>
            <td>第四行第四列</td>
            <td>第四行第五列</td>
        </tr>
</table>
<br/>
<div align="center"><input type="button" id="addcl" value="删除第二列" /></div>
  <table id="table3">
        <tr>
            <th style="width: 160px;">表头一</th>
            <th style="width: 160px;">表头二 </th>
            <th style="width: 160px;">表头三</th>
            <th style="width: 160px;">表头四</th>
            <th style="width: 160px;">表头五</th>
        </tr>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
            <td>第一行第四列</td>
            <td>第一行第五列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
            <td>第二行第四列</td>
            <td>第二行第五列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
            <td>第三行第四列</td>
            <td>第三行第五列</td>
        </tr>
        <tr>
            <td>第四行第一列</td>
            <td>第四行第二列</td>
            <td>第四行第三列</td>
            <td>第四行第四列</td>
            <td>第四行第五列</td>
        </tr>
         <tr>
            <td>第五行第一列</td>
            <td>第五行第二列</td>
            <td>第五行第三列</td>
            <td>第五行第四列</td>
            <td>第五行第五列</td>
        </tr>
</table>
</body>
</html>
使用jQuery删除指定列
DevPhantom的博客
10-06 251
在网页开发中，经常需要对表格进行操作，例如删除指定的列。jQuery是一个流行的JavaScript库，它提供了简洁的语法和强大的功能，使得操作DOM元素变得更加容易。本文将介绍如何使用jQuery删除指定的列，并提供相应的源代码。通过这种方式，我们可以轻松地操作表格，并根据需求删除指定的列。以上提供的代码可以在您的网页中使用，并根据需要进行修改。接下来，我们将使用jQuery选择器来选中要删除的列。通过以上代码，我们成功删除了表格中的指定列。如果我们要删除其他列，只需修改选择器中的列索引即可。
jquery table 添加、删除行、列
08-21
使用jquery对行列进行删除、新增,动态添加。
JS删除table的行和列
weixin_38061311的博客
02-11 3069
&lt;script &gt; function deleteCol(obj){ var index=obj.cellIndex; var table = document.getElementById("table"); var len = table.rows.length; for(var i = 0;i &lt; len;i++){ ...
jquery增加/删除列
我想我是海 冬天的大海 心情随风轻摆
03-30 1万+
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:script src="js/jquery-1.4.1.min.js" mce_src=
使用JQuery，动态增加列
a177871889的博客
07-22 564
这也是我在自己学做网站时无意搞出来的，希望可以对别人有所启发 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 3 &l...
利用jquery给指定的table动态添加一行、删除一行的方法
11-22
今天在项目中，刚好用到给指定的table添加一行、删除一行，就直接找google，搜出来的东西不尽如人意，不是功能不好就是千篇一律，简直浪费时间还不讨好，于是乎就自己动手封装个，现就把代码分享出来，避免大伙重复...
jQuery增加与删除table列的方法
11-25
注释掉的其他行展示了如何删除第一列、指定列或除第一列外的所有列。这些选择器利用了jQuery的伪类选择器，如`:first-child`、`:last-child`和`:nth-child()`。 关于jQuery的选择器，还有一些其他常用的类型，例如...
jQuery实现表单动态添加与删除数据操作示例
10-18
表格的第一列包含复选框，最后一列则有一个“删除”按钮，用于移除选定的行。 ```html 用户:密码:邮箱: 添加"> <table id="table" border="1ps"> <td><input type="checkbox"> 用户名 密码 邮箱 操作 ...
使用若依后台系统框架实现前端表格一对多添加与删除，使用JQ
03-29
嗯，用户想了解如何在若依后台系统框架中使用JQuery实现前端表格的一对多添加和删除功能。首先，我需要回忆一下若依框架的结构和常用技术。若依是基于Spring Boot和Vue的，但用户提到使用JQuery，说明他们可能在使用...
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
11-29
`edittype: 'select'`表示这一列的单元格将以下拉选择框的形式显示，而`formatter: groupGrid.formatOptions`则是自定义格式化函数，用于生成HTML代码，创建操作按钮的下拉菜单。以下是一个具体的列配置示例： ```...
jquery实现动态添加列，删除指定列
12-21
jquery脚本实现动态添加列，删除指定列
jquery删除第二列和第三列
山鹰的专栏
05-25 1080
        $(function () {            $(".TitleTable tr").find("td:nth-child(2)").remove();            $(".TitleTable tr").find("td:nth-child(1)").remove();        }); 
jQuery实现table的全选和删除（附源码）
心有—林夕的博客
06-12 325
jQuery实现table的全选和删除（附源码）
jquery 删除table行,该如何解决
weixin_30825581的博客
06-09 591
query 删除table行< table > < tbody > < tr > < td > 这行原来就有 </ td > < td >< button class = " del " > 删除 </ button ></ td > </ tr > &lt...
jQuery删除table表格当前行除首列与最后一列的所有列
Geek_U的博客
01-19 2943
在表格中使用使用jquery获取父级元素后在获取相应的td进行删除 代码：$(‘当前行的触发按钮’).parent()..find(‘td:not(:first):not(:last)’).remove();
使用jQuery实现自定义添加table的行和列
zzy_2016的博客
12-15 1086
需求：根据用户自己填写的两个参数来添加需要合并的行的总行数和每个合并行里面包含多少行。 jsp页面代码 <div class="main-container" id="main-container"> <!-- /section:basics/sidebar --> <div class="main-content"> <div class="main-content-inner"> <div class="page-content
Jquery实现表格行的添加、删除
热门推荐
互联网的世界，我要看看！
08-16 4万+
最近做一个投票管理的模块，需要添加问题选项，为了方便，就简单地实现了表格行的添加、删除。 注：需引入jquery.js 先上效果图：(form中默认有4行) 表单代码： 所属问题 (单选) (复选)： ${question} 选项1：
jquery 中table动态添加行和删除列操作
Tiger的专栏
05-30 1万+
1.简单的table使用定义&lt;table class="table table-bordered table-hover" style="text-align: center;" id="Result"&gt; &lt;thead&gt; &lt;tr&gt; &lt;
javascript js 删除表格的行、单元列
hoojo
06-18 2248
动态删除表格的行、列，有点类似于String中的substring函数。不过这里也有开始删除的位置和删除的长度。但是不包括起始位置，用法和substring类似；
原生table 添加序号
最新发布
01-01
<think>首先，用户的问题是：“我想查找为原生table添加序号的方法 请问如何为原生table添加序号”。用户明确要求为原生table添加序号的方法。参考了站内引用，但用户说这些引用仅供参考，不是真正的需求，我需要参考用户上一次的问题和我的回答。 回顾系统级指令： - 所有行内数学表达式必须用$...$格式。 - 独立公式用$$...$$格式。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 - 回答结构清晰，帮助用户逐步解决问题，保证真实可靠。 用户没有提供上一次的问题，所以我假设这是第一次互动。用户的问题是关于为原生table添加序号的方法。 从引用[1]和引用[2]中提取相关信息： imitate - 引用[1]：提供了jq动态添加table表格序号的方法，包括原生jq和vue。原生jq的方法是：`list += "<td>"+(parseInt(page)-parseInt(1)) * parseInt(per)+(i+1)+"<td>";`，并提到需要放在for循环中。 6969 - 引用[2]：提到了在el-table中处理排序，使用`type="index"`和自定义索引方法。 用户指定了要为原生table添加序号，所以我应该专注于原生JavaScript或jQuery方法，而不是框架如Vue或Element UI。 关键点：用户说“原生table”，可能指的是普通的HTML表格，使用纯JavaScript或jQuery。 步骤来构建回答： 1. **理解需求**：解释原生table是指使用HTML `<table>`元素创建的表格。 2. **方法概述**：提供几种方法来添加序号。 3. **详细步骤**：逐步解释如何实现。 4. **代码示例**：给出代码片段。 5. **注意事项**：提醒常见问题。 6. **生成相关问题**：在末尾添加相关问题。 确保回答使用中文。 结构回答： - 开头：确认用户需求。 - 主体：提供解决方案。 - 结尾：添加相关问题。 具体方法： 1. **使用纯JavaScript**：在创建表格行时，添加一个序号列。 - 示例：在for循环中，为每一行添加一个td元素，内容为行号。 2. **使用jQuery**：类似，但使用jQuery语法。 - 参考引用[1]中的jq方法。 3. **其他方法**：如使用CSS计数器或JavaScript事件，但序号方法最简单。 在回答中，自然地引用提供的引用。既然用户说不是真正的需求，但我可以参考它们。 引用[1]有原生jq的方法：`list += "<td>"+(parseInt(page)-parseInt(1)) * parseInt(per)+(i+1)+"<td>";`。这考虑了分页，其中page是当前页，per是每页条数，i是索引。 对于原生table，如果没有分页，序号可以更简单。 生成相关问题： - 如系统示例所示，添加“§§相关问题§§”部分。 确保LaTeX：用户问题中没有数学表达式，但如果有，需处理。这里可能不需要。 回答结构： 1. 介绍：解释如何为原生table添加序号。 2. 方法1：纯JavaScript。 3. 方法2：jQuery（参考引用）。 4. 代码示例。 5. 注意事项。 6. 相关问题。 在引用中，自然地添加引用标识，如[^1]。 </think> ### 为原生table添加序号的方法 为原生HTML表格（使用纯JavaScript或jQuery实现）添加序号，是一种常见的需求，通常用于在表格左侧显示行号（如1,2,3,...）。序号可以是静态的（从1开始）或动态的（考虑分页）。以下是基于原生JavaScript和jQuery的逐步实现方法，确保代码简洁可靠。我会参考站内引用中的关键点[^1][^2]，但聚焦原生场景。 #### 1. **理解核心逻辑** - **序号生成原理**：在创建表格行（`<tr>`）时，添加一个额外的单元格（`<td>`），内容为行索引值。 - **分页处理**：如果表格有分页（例如每页显示10条），序号需计算偏移量：`(当前页 - 1) * 每页条数 + 当前行索引 + 1`。 - **关键步骤**： - 在循环中添加行时动态计算序号。 - 将序号插入到每行的第一个单元格。 #### 2. **方法一：纯JavaScript实现** 适用于原生HTML表格，无需额外库。假设已有表格数据，通过循环动态构建行。 ```javascript // 假设: tableBody 是表格的 tbody 元素, data 是数据数组, page 是当前页码, perPage 是每页条数 function addRowNumbers(tableBody, data, page = 1, perPage = data.length) { tableBody.innerHTML = ''; // 清空表格 for (let i = 0; i < data.length; i++) { const row = document.createElement('tr'); // 添加序号列: 计算序号值 (e.g., 第一页: i+1; 分页时: (page-1)*perPage + i+1) const seqCell = document.createElement('td'); const seqValue = (parseInt(page) - 1) * parseInt(perPage) + (i + 1); // 参考引用[1]的序号计算 seqCell.textContent = seqValue; row.appendChild(seqCell); // 添加数据列 (示例: 假设数据对象有 name 和 age) const nameCell = document.createElement('td'); nameCell.textContent = data[i].name; row.appendChild(nameCell); const ageCell = document.createElement('td'); ageCell.textContent = data[i].age; row.appendChild(ageCell); tableBody.appendChild(row); } } // 使用示例 const tbody = document.getElementById('myTableBody'); // 替换为你的tbody ID const sampleData = [{name: 'Alice', age: 30}, {name: 'Bob', age: 25}]; addRowNumbers(tbody, sampleData, 1, 10); // 无分页时 perPage 可省略 ``` - **注意事项**： - 序号列应放在每行的第一位置。 - 如果表格是静态的（无分页），简化公式为 `i + 1`。 - 确保`page`和`perPage`为整数，使用`parseInt`避免类型错误。 #### 3. **方法二：使用jQuery实现** jQuery简化了DOM操作，适合动态表格。引用[1]提供了原生jq的示例代码。 ```javascript // 假设: #myTable 是表格元素, data 是数据数组, page 和 perPage 用于分页 function addRowNumbersWithJQuery(data, page = 1, perPage = data.length) { $('#myTable tbody').empty(); // 清空表格 $.each(data, function(i, item) { // 计算序号: 公式与JavaScript相同 const seqValue = (parseInt(page) - 1) * parseInt(perPage) + (i + 1); // 直接参考引用[1] // 构建行: 使用字符串拼接或jQuery方法 const row = $('<tr>').append( $('<td>').text(seqValue), // 序号列 $('<td>').text(item.name), $('<td>').text(item.age) ); $('#myTable tbody').append(row); }); } // 使用示例 const data = [{name: 'Alice', age: 30}, {name: 'Bob', age: 25}]; addRowNumbersWithJQuery(data, 1, 10); ``` taller - **说明**： - 引用[1]的核心公式 `(parseInt(page)-parseInt(1)) * parseInt(per)+(i+1)` 被直接应用，确保分页时序号连续。 - 使用 `$.each` 循环处理数据，比原生JavaScript更简洁。 #### 4. **常见问题与优化** - **动态更新**：如果表格数据变化（如新增/删除行），重新调用函数刷新序号。 - **性能**：避免在循环中频繁操作DOM；使用文档片段（`document.createDocumentFragment()`）提升效率。 东山再起 - **样式与对齐**：为序号列添加CSS（如 `text-align: center; width: 50px;`）确保美观。 - **注意事项**：如果表格是服务端渲染，序号应在后端生成，以减轻前端负担。 通过以上方法，您可以为原生table轻松添加序号。如果涉及框架（如Vue），引用[2]提供了Element UI的自定义索引方案[^2]，但原生实现更轻量。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值