JQuery遍历获取table中的第一个和第四个孙子，并把第四个孙子赋值给另一个table

最新推荐文章于 2021-01-08 12:31:37 发布
原创 最新推荐文章于 2021-01-08 12:31:37 发布 · 927 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这篇博客展示了如何使用JQuery选取table中的特定行（孙子元素），并根据条件将第四个子元素的值赋给另一个table的对应单元格。点击按钮后，如果找到匹配的‘尝试X’，则会将当前行的第四个子元素（成绩X）赋值给另一个table中对应的DataX单元格。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#a_id").click(function(){
                  $('.test').each(function(index) {
                      var  td = $(this).children().eq(0).text();//获取tr的第一个孩子
                        var da =  $(this).children().eq(3).text();//第四个
                       if(td=="尝试1"){
                            var data1 = $($("#tr_id2_td1")).next();
                             data1 = da;
                            alert(data1);
                        }
                        if(td=="尝试2"){
                            var data2 = $($("#tr_id2_td2")).next();
                             data2 = da;
                            alert(data2);
                        }
                        if(td=="尝试3"){
                            var data3 = $($("#tr_id2_td3")).next();
                             data3 = da;
                            alert(data3);
                        }
                    });
                    
                });
            });
            
        </script>
    </head>
    <body>
        <table border="1">
            <tr class="test">
                <td>尝试1</td>
                <td>测试</td>
                <td>狐狸</td>
                <td>成绩1</td>
            </tr>
            <tr class="test">
                <td>尝试2</td>
                <td>测试</td>
                <td>狐狸</td>
                <td>成绩2</td>
            </tr>
            <tr class="test">
                <td>尝试3</td>
                <td>测试</td>
                <td>狐狸</td>
                <td>成绩3</td>
            </tr>
            <tr class="test">
                <td>尝试4</td>
                <td>测试</td>
                <td>狐狸</td>
                <td>成绩4</td>
            </tr>
            <tr class="test">
                <td>尝试5</td>
                <td>测试</td>
                <td>狐狸</td>
                <td>成绩5</td>
            </tr>
            <tr class="test">
                <td>尝试6</td>
                <td>测试</td>
                <td>狐狸</td>
                <td>成绩6</td>
            </tr>
            <tr class="test">
                <td>尝试7</td>
                <td>测试</td>
                <td>狐狸</td>
                <td>成绩7</td>
            </tr>
        </table>
        <table border="" cellspacing="" cellpadding="">
            
            <tr id="tr_id2">
                <td>Data1</td>
                <td id="tr_id2_td1">sdfs</td>
            </tr>
            <tr>
                <td>Data2</td>
                <td id="tr_id2_td2"></td>
            </tr>
            <tr>
                <td>Data3</td>
                <td id="tr_id2_td3"></td>
            </tr>
        </table>
        <a id="a_id" href="#"><b>点击</b></a>
    </body>
</html>
jQuery –第一个孩子和最后一个孩子选择器示例
一名可爱的技术搬运工
05-21 3367
：first-child用于选择作为其父级的第一个子级的所有元素，这是：nth-​​child（1）的简写。 例子 $（'li：first-child'）–选择与<li>匹配的所有元素，它们是其父级的第一个孩子。 $（tr：first-child'）–选择与<tr>匹配的所有元素，它们是其父级的第一个孩子。 ：last-child用于选择作为其父级的最...
v-model --双向数据绑定
qq_45802159的博客
01-03 3396
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jQuery遍历--祖先、后代、同胞
weixin_43472934的博客
05-06 424
jQuery遍历 祖先 1、parent()—返回所有被选元素的直接父元素。 2、parents()—返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。html也算。 3、parentsUntil—返回介于两个给定元素之间的所有祖先元素。不包含两个给定的元素 　 下面的例子返回介于<span> 与<div> 元素之间的所有祖先元素： $(documen...
【Jquery】Jquery操作table表格详细说明
liuzhenhe1988的专栏
01-08 2000
函数说明 //eq:获取子元素索引从 0 开始 $("#tableid tr th:eq(1)").remove();//第二列 //nth-child:获取子元素从 1 开始 $("#tableid tr td:nth-child(2)").remove();//第二列 行操作 1、隐藏行 $("#tableid tbody tr:eq(3)").hide(); //隐藏第四行，行索引从0开始 //隐藏第二行的方式 $("#tableid tr:gt(0):eq(1)").hide();//
选中table某一个tr获取某一列的值
Lune2018的博客
11-07 554
var arr = []; var id = $(this).children('td').eq(0).text(); //第一列 var name= $(this).children('td').eq(1).text();//第二列 arr.push(id); arr.push(name);
jQuery实现动态给table赋值的方法示例
10-19
本篇文章将深入探讨如何使用jQuery来动态地给HTML表格（table）赋值，通过一个具体的实例来展示相关技巧。 首先，我们需要一个基本的HTML结构，包含一个具有特定类和ID的table元素。在这个例子中，我们有一个layui...
jQuery获取table下某一行某一列的值实现代码
10-20
3. 遍历表格：通过for循环结合.eq(i)方法遍历每一个找到的表格，其中.eq(i)方法用于选择集合中的第i个元素。这里的i表示循环中的索引，用于逐个处理每一个表格元素。 4. 获取表格行和列：在循环体内，使用.find("tr...
jquery遍历table中每个td的值
江夏、的博客
10-16 1283
最近有个需求，需要对一个table在特定情况下修改第几个td的样式，这里需要使用到jquery选择器了，我的写法是，这里改为直接隐藏元素了： $('.divdemo>table tr').each(function(){ //每个tr下的第4个th $(this).find('th:eq(3)').hide(); $(this).find
js将table的每个td的内容自动赋值给其title属性的方法
10-21
接下来，我们需要找出table的最后一个th单元格的索引，因为这个例子中我们不希望为最后一列的td赋值。我们可以通过计算th的数量并减去1来得到这个索引： ```javascript var cellIndex = parseInt($(".tbStyle th")....
js给table赋值的实例代码
10-21
接下来，通过jQuery的`$(data).each`方法遍历`data`数组，创建表格的每一行和单元格，并将计算后的学费数据填充到表格中。对于每一行（`<tr>`）： 1. 首先判断是否为第一学年。如果是，使用基础学费数组`bei`来计算...
html+jq点击获取table中的tr并获取其td的值
weixin_44003156的博客
08-23 3275
结果： HTML代码： <div class="list"> <table width="200" border="1"> <thead> <td>头1</td> <td>头2</td> </thead> <tbody> <tr> <td>1</td> <td>2</td>
$(this).parent("tr").find("td").eq(0).text()
Chen Rong的博客
03-16 5881
$(this).parent(“tr”).find(“td”).eq(0).text()
jQuery找祖先和子孙节点方法
卫可冬的博客
12-30 5252
$("span").closest("ul") //找span的祖先ul $("ul").find("span") //找ul的子孙span $(selector).find(filter) find() 方法返回被选元素的后代元素。 后代是子、孙、曾孙，依此类推。 **DOM 树：**该方法沿着 DOM 元素的后代向下遍历，直至最后一个后代的所有路径（）。 **注意：**filter 参数在...
jQ 子元素选择器和后代选择器
cominglately的博客
09-30 8038
语法: $("patent  > child") 选择只是儿子，不包括孙子 ...  eg： p id="n2" class="test"> span id="n3" class="a">Hellospan> div>span id="n7" class="a">Hello7span>div> p> var p_span = $("p > span")
遍历一个文件夹的所有儿子孙子
lkwan123的博客
06-14 537
文件夹的结构是一个树形结构，所以遍历一个文件夹和遍历一棵树是差不多的。思路很简单，因为文件夹有很多层所以最明显的就是递归方法去求对于每一子项都是一个相同的操作。以下是我的思路图： 以下是代码，一般人应该都可以看懂 package com.fgh; import java.io.File; import java.util.List; public class FileDemo {
jQuery获取当前元素是该父元素的第几个元素&获取父元素的第n个子元素
热门推荐
MOONCOM的博客
09-26 4万+
示例代码： 第一个元素 第二个元素 第三个元素 第四个元素 一、jQuery获取当前元素是该父元素的第几个元素 index() 方法返回指定元素相对于其他指定元素的 index 位置。 这些元素可通过 jQuery 选择器或 DOM 元素来指定。 注释：如果未找到元素，index() 将返回 -1
jquery中选择第n个孩子的选择器即nth-child选择器
行天之路
10-30 2万+
Jquery 的nth-child 选择器用来选择其父标签的第n个child 标签。其索引是从1 开始的即n是从1开始，而非从0开始。   例如： 1 $(‘tr:nth-child(3)’) —选择tr父标签元素中的第三个tr孩子元素。 2 $(‘tr:nth-child(3n)’)—选择tr父标签中的第3的倍数位置上的tr 孩子标签元素。 3 $(‘tr:nth-child(even
实现表格行动态增删的jQuery特效教程
在jQuery中，要向表格中新增一行，通常涉及到创建新的和元素，并将它们添加到<table>中。具体实现可以通过以下步骤进行： 1. 使用$(document).ready()确保文档完全加载后执行脚本。 2. 准备要插入的内容，可能是静态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值