jqTable 添加删除一列

最新推荐文章于 2022-06-12 22:14:48 发布
最新推荐文章于 2022-06-12 22:14:48 发布
阅读量3k 收藏
点赞数
分类专栏： 界面js之类的东西
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cymlancy/article/details/44040051
版权


<!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>
cymlancy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery table 添加、删除行、列
08-21
使用jquery对行列进行删除、新增,动态添加。
jQuery增加与删除table列的方法
11-25
注释掉的其他行展示了如何删除第一列、指定列或除第一列外的所有列。这些选择器利用了jQuery的伪类选择器，如`:first-child`、`:last-child`和`:nth-child()`。 关于jQuery的选择器，还有一些其他常用的类型，例如...
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 511
这也是我在自己学做网站时无意搞出来的，希望可以对别人有所启发 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删除第二列和第三列
山鹰的专栏
05-25 1022
        $(function () {            $(".TitleTable tr").find("td:nth-child(2)").remove();            $(".TitleTable tr").find("td:nth-child(1)").remove();        }); 
利用jquery给指定的table动态添加一行、删除一行的方法
11-22
今天在项目中，刚好用到给指定的table添加一行、删除一行，就直接找google，搜出来的东西不尽如人意，不是功能不好就是千篇一律，简直浪费时间还不讨好，于是乎就自己动手封装个，现就把代码分享出来，避免大伙重复...
jQuery实现表单动态添加与删除数据操作示例
10-18
表格的第一列包含复选框，最后一列则有一个“删除”按钮，用于移除选定的行。 ```html 用户:密码:邮箱: 添加"> <table id="table" border="1ps"> <td><input type="checkbox"> 用户名 密码 邮箱 操作 ...
jQuery实现列表的增加和删除功能
10-18
7. **动态DOM操作**：在添加新行时，我们创建了一个新的`<tr>`元素，并立即为其添加了删除事件监听器。这意味着即使在页面加载后添加的元素，也可以响应删除操作。 通过这些jQuery技术，我们可以轻松地实现在网页上...
基于jQuery获取table数据发送到后端
10-15
在这个例子中，我们首先获取了表格中的所有行，然后遍历每一行，提取出每一列的文本内容，并封装成一个JavaScript对象。最后，我们将这些对象组成一个数组，并用`JSON.stringify()`转换为JSON字符串，通过jQuery的`$...
jquery实现动态添加列，删除指定列
12-21
jquery脚本实现动态添加列，删除指定列
jQuery实现table的全选和删除（附源码）
心有—林夕的博客
06-12 274
jQuery实现table的全选和删除（附源码）
jquery 删除table行,该如何解决
weixin_30825581的博客
06-09 551
query 删除table行< table > < tbody > < tr > < td > 这行原来就有 </ td > < td >< button class = " del " > 删除 </ button ></ td > </ tr > &lt...
jQuery删除table表格当前行除首列与最后一列的所有列
Geek_U的博客
01-19 2827
在表格中使用使用jquery获取父级元素后在获取相应的td进行删除 代码：$(‘当前行的触发按钮’).parent()..find(‘td:not(:first):not(:last)’).remove();
使用jQuery实现自定义添加table的行和列
zzy_2016的博客
12-15 965
需求：根据用户自己填写的两个参数来添加需要合并的行的总行数和每个合并行里面包含多少行。 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;
js 删除指定table列
不积跬步无以至千里
12-26 2422
var trs = document.getElementById("datatable").rows;      for(var i = 0, len = trs.length; i          var cell0 = trs[i].cells[0];          var cell7 = trs[i].cells[7];          cell0.style.displ
jqgrid删除某一列(隐藏)
宇宙的黑洞
04-20 3923
$("#jqGrid_table").setGridParam().hideCol("列的名字");//隐藏 $("#jqGrid_table").setGridParam().showCol("列的名字");//显示
js实现动态删除表格的行或者列-------Day57
aodiyi6351的博客
05-04 263
昨天记录了动态加入表格的一行，当然这个一行是指一行数据，也就是说一行多少列也是加上的，而且第几列的内容都能够加入上，先来回想下它的实现的关键点： 1、var row=table.insertRow();加入一行； 2、var cell1=row.insertCell();加入一个单元格；(假设在后面继续写var cell2=row.insertCell()的话。就是加入第二列...
jq给table添加行
最新发布
03-29
要向table添加行，您需要使用jQuery的append()方法。以下是一些示例代码： 1. 在表格的末尾添加一行： ``` $("#myTable").append("<tr><td>Cell 1</td><td>Cell 2</td></tr>"); ``` 2. 在表格的开头添加一行： `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值