我提取表格单元格内部文本的逻辑有啥问题？

Posted 2023-05-09

【中文标题】我提取表格单元格内部文本的逻辑有啥问题？

【英文标题】：What is wrong with my logic for extracting the inner text of table cells?我提取表格单元格内部文本的逻辑有什么问题？

【发布时间】：2015-12-29 22:10:16

【问题描述】：

我正在尝试制作一个如下所示的程序：

<tbody id="slide-table-body">
   <tr>
        <td>
             pic1.jpg
        </td>
        <td>
             pic2.jpg
        </td>
   </tr>
   <tr>
        <td>
             pic3.jpg
        </td>
        <td>
             pic4.jpg
        </td>
   </tr>
   <tr>
        <td>
             pic5.jpg
        </td>
        <td>
             pic6.jpg
        </td>
   </tr>
</tbody>

-------------------------------------->

[  assetPreviewUrl: "pic1.jpg", assetUrl: "pic2.jpg" , 
   assetPreviewUrl: "pic3.jpg", assetUrl: "pic4.jpg" , 
   assetPreviewUrl: "pic5.jpg", assetUrl: "pic6.jpg"  ]

我可以用更严格的术语来描述，但我想你明白了：基本上，它解析单元格的内部文本并将结果存储为 JSON。

我运行该过程的功能如下，它不起作用。

parseSlides = function ( )

    var slidesArr = [];
    $('#slide-table-body').children().each(function()  // each row
        slidesArr.push(
            
               assetPreviewUrl : $(this).first().text(), // first cell's text 
               assetUrl        : $(this).last().text() // second/last cell's text
            
        );           
    );
    return slidesArr; 

输出类似于

[  assetPreviewUrl: "pic1.jpgpic2.jpg", assetUrl: "pic1.jpgpic2.jpg" , 
   assetPreviewUrl: "pic3.jpgpic4.jpg", assetUrl: "pic3.jpgpic4.jpg" , 
   assetPreviewUrl: "pic5.jpgpic6.jpg", assetUrl: "pic5.jpgpic6.jpg"  ]

我做错了什么？

编辑：感谢您的回答。我将随机决定选择谁作为最佳答案：

var answerers = [ "BG101", "Skylord123", "Igor" ];
console.log(answerers[Math.floor(Math.random() * answerers.length)]); // printed "Skylord123"

【参考方案1】：

我不会使用first() 和last() JQuery 函数，而是使用children('td:first') 和children('td:last')。

当您在this 上运行first() 时，您将抓取列表中的第一项，在这种情况下为this。你没有得到第一个子元素。将children() 函数与选择器一起使用会从this 中获取子元素。

我对此进行了测试，它确实有效。所以修改你的代码：

parseSlides = function ( )

    var slidesArr = [];
    $('#slide-table-body').children().each(function()  // each row
        slidesArr.push(
            
               assetPreviewUrl : $(this).children('td:first').text(), // first cell's text 
               assetUrl        : $(this).children('td:last').text() // second/last cell's text
            
        );           
    );
    return slidesArr; 

【参考方案2】：

jQuery.first - 将匹配元素的集合减少到集合中的第一个。

不是

获取第一个子元素。

使用$(this).first().text() 和$(this).last().text()，您将两次获得该行的innerText。

【讨论】：

在他这样做的情况下，在 $(this) 上调用 first() 将返回列表中的第一个元素，这不是他想要的。他想要第一个和最后一个子元素。

@Skylord123 - 我就是这么说的。

啊，我错过了。对不起。 :)

那么解决办法是什么？

@epascarello - OP 已经知道 children 函数。

【参考方案3】：

试试这个：-

parseSlides = function ( )

    var slidesArr = [];
    $('#slide-table-body').children().each(function()  // each row
        slidesArr.push(
            
               assetPreviewUrl : $(this).children().first().text(), // first cell's text 
               assetUrl        : $(this).children().last().text() // second/last cell's text
            
        );           
    );
    return slidesArr;