区分具有相同类、id 和父类的表行

Differentiate table rows with same class, id and parent classes

本文关键字：父类 id 同类      更新时间：2023-09-26

背景：

我正在一个具有Microsoft SharePoint Designer 2010 编辑可能性的 teamplace .NET 网站上开发客户端。但是，由于安全预防措施，我无法访问任何代码隐藏。因此，我不能直接将数据从服务器传递到客户端。因此，我必须使用标准 Web 部件将存储的数据获取到当前页面，然后获取值并将其设置为我自己实现的 html 代码。然后，我将隐藏网络部件。

这就是为什么我只能通过使用javascript来完成我的目标。


我无法更改或添加任何属性到此渲染代码中的任何元素。以下是我(通过使用开发人员工具(重新创建的基础结构，它类似于实际呈现的 html 代码(它有很多附加属性(：

<div id="WebPartWPQ7">
    <table>
        <tbody>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr class="ms-viewheadertr ms-vhltr"></tr>
                            <tr class="ms-itmhover">
                                <td class="ms-vb-itmcbx ms-vb-firstCell"></td>
                                <td class="ms-vb2 ms-vb-lastCell">
                                    <a href="http://www.google.com">Example link</a>
                                </td>
                            </tr>
                            <tr class="ms-alternating ms-itmhover">
                                <td class="ms-vb-itmcbx ms-vb-firstCell"></td>
                                <td class="ms-vb2 ms-vb-lastCell">
                                    <a href="http://www.google.com">Example link 2</a>
                                </td>
                            </tr>
                            <tr class="ms-itmhover">
                                <td class="ms-vb-itmcbx ms-vb-firstCell"></td>
                                <td class="ms-vb2 ms-vb-lastCell">
                                    <a href="http://www.google.com">Example link 3</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>


这是我自己的代码，我想在其中为表行第二列的每个值附加链接。

<ul id="frLinks">
        <li class="lTitle">
            <strong>Related Links</strong>
        </li>
</ul>


我想从每个表格行的第二个表格单元格中包含的每个 a 标签中获取 href 和文本内容。这是我的尝试：

var rowCount = $('#WebPartWPQ7 table tbody tr td table tbody tr').length;
for (i = 0; i < rowCount-1; i++) { //not appending to title row
    var relatedLinkText = $("#WebPartWPQ7 table tbody tr td table tbody .ms-itmhover .ms-vb-lastCell a").html();
    var relatedLink = $("#WebPartWPQ7 table tbody tr td table tbody .ms-itmhover .ms-vb-lastCell a").attr("href");
    $("#frLinks").append( '<a href="' + relatedLink + '"><li>' + relatedLinkText + '</li></a>');
}


我的问题是，当我从表中获取这些链接时，如何区分它们。在这种情况下，可以理解的是，它总是采用第一个并附加到列表中。我的目标是获取每一个并将其添加到我的列表中，但是如何呢？

请参阅此jsFiddle以获取更多清晰度。

我知道我的后代选择器的低效率和不灵活性，如果您愿意分享更好的整体替代方案，我将很高兴。

你可以

试试这个

$('#WebPartWPQ7 table tbody tr td table tbody tr').each(function(){
  var $a = $(this).find("td:eq(1) a").clone();
  $("#frLinks").append($("<li/>").append($a));
})

演示

$('tr.ms-itmhover').each(function(){
link = $(this).find('td.ms-vb-lastCell').html();
$("#frLinks").append('<li>'+link+'</li>');
})

这将获取所有链接并附加到您的代码中。我已经在这里更新了你的JSFiddle示例JSFiddleUpdate

相关文章：