jq操作table追加td

示例

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    </head>
    <style type="text/css">
        .well {
            font-weight: 600;
            position: relative;
            height: 22px;
        }
        .add {
            margin-left: 15px;
            position: absolute;
            cursor: pointer;
        }
    </style>
    <body>
        <table style="width:100%;border: 1px solid #ccc;" border="1" cellspacing="0" cellpadding="6" id="table1">
            <tr>
                <td align="center">1day</td>
                <td align="center" class="well">景点 <span class="add">+</span></td>
                <td align="center" rowspan="5">小计</td>
            </tr>
        </table>
    </body>
    <script>
        $(document).ready(function() {
            $(".add").click(function() {
                $(this).parents('tr').after('<tr><td class="well"></td></tr>');   //1,追加tr
                var num = $(this).parent().prev().attr('rowspan') ? $(this).parent().prev().attr('rowspan') : //2,判断第一个td有没有rowspan的属性
                $(this).parent().prev().attr('rowspan', num + 1);  //左侧的
                $(this).parent().next().attr('rowspan', num + 1); //右侧的
            })
        })
    </script>
</html>

原文地址:https://www.cnblogs.com/lml-lml/p/10430211.html

时间: 2024-11-05 23:24:14

jq操作table追加td的相关文章

汇总常用的jQuery操作Table tr td方法

虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率. 1.鼠标移动行变色  $("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){

jQuery操作Table tr td方法大全

虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率. 1.鼠标移动行变色  $("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){

jq 操作table

转载于:http://www.jb51.net/article/34633.htm jquery获取table中的某行全部td的内容方法,需要的朋友可以参考一下 <table><tr class="PurViewData" id="trid95">    <td>14</td>    <td id="95"><a style="color:#0000CC" hr

JQ 获取Table的td 值

<script type="text/javascript"> function SetTable() { $("#myTab table").each(function () { var sValue= $(this).find("tr").eq(0).find("td").eq(0).html(); alert(sValue); }) } </script> <input type="

jQuery操作表格,table tr td,单元格

jQuery操作表格,table tr td,单元格 乔乐共享jQuerytable单元格表格 最终效果图:  .td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; } <table id="tbl_count"> <caption>2013春节聚会收支统计</caption> <tr> <th>

jq 获取table元素,ajax 静态填加数据

知识点: 1.jq如何操作table->操作html内的元素 2. this 怎么使用 问题: 1.点击 修改 后,自动刷新了.判断取值,提示错误.正确出不来 2.ajax传值操作如何保密 html: <table class="table"> <tr> <td>排序</td> <td>名字</td> <td>链接</td> <td>操作</td> </t

table中td内容过长 省略号显示

首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1">用户ID</th> <th class="col-md-1">用户名</th> <th class="col-md-1">联系电话</th> <th class="col-md-1&q

第十三篇 JS 操作table表格

JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然是真的了对吧,那么1=2呢,那就是假的,因为正常情况下,1不可能等于2,1就是1.那么我们在JS里写一个: var a=1; if(a=1){ alert('正确'); }else{ alert('错的'); } 给一个变量,来做判断,大家记住,if也有它的规则,先一个if,圆括号做判断,随后一个花

js实现动态操作table

 本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&