时间戳

首页 > 解决方案 > Tampermonkey 用户脚本通过关键字搜索获取表格单元格数据？

javascript - Tampermonkey 用户脚本通过关键字搜索获取表格单元格数据？

问题描述

我是使用 Tampermonkey 并尝试从该行包含的表中获取员工姓名的新手data-akfk-type="event">AHOD

例如，在下表中，这应该返回'Clare'，并且'Ivan'因为每一行都有data-akfk-type="event">AHOD

该表将始终有两行包含'AHOD'但它们可以在表中的任何行上。

<table id="iCalTbl" class="groupCalendar">
<tr id="clare@test.com_data_row" data-dp-employeeid="clare@test.com" class="iCalTblRow">
    <td data-dp-col="0" class="iCalTblCell iCalTblEmployeeCell" id="header-clare@test.com">
        <div class="rowHeaderCell"><a href="#" title="Display employee details"
                data-akfk-type="employee" id="clare@test.com">
                Clare</a>&nbsp;&nbsp;<img src="images/flags/country/spain.png">
        </div>
    </td>
    <td data-dp-col="1" class="tblCalendDailyViewMain">.</td>
    <td data-dp-col="2" class="tblCalendDailyViewMain">.</td>
    <!-- ... -->
    <td data-dp-col="18" class="tblCalendDailyViewMain iCalTblCellNow">.</td>
    <td data-dp-col="19" class="tblCalendDailyViewMain iCalTblCellNow">.</td>
    <!-- ... -->
    <td data-dp-col="29" class="tblCalendDailyViewMain">.</td>
    <td data-dp-col="30" class="tblCalendDailyViewMain">
        <div data-akfk-type="cell" data-dp-employeeid="clare@test.com">
            <div class="shiftlightblue eventDailyContainer" data-akfk-type="eventContainer">
            <span id="event_1601787" data-akfk-type="event">AHOD</span></div>
        </div>
    </td>
    <td data-dp-col="31" class="tblCalendDailyViewMain">.</td>
    <!-- ... -->
</tr>

<tr id="sally@test.com_data_row" data-dp-employeeid="sally@test.com" class="iCalTblRow">
    <td data-dp-col="0" class="iCalTblCell iCalTblEmployeeCell" id="header-sally@test.com">
        <div class="rowHeaderCell"><a href="#" title="Display employee details"
                data-akfk-type="employee" id="sall@test.com">
            Sally</a>&nbsp;&nbsp;<img src="images/flags/country/united_arab_emirates.png">
        </div>
    </td>
    <td data-dp-col="1" class="tblCalendDailyViewMain">.</td>
    <td data-dp-col="2" class="tblCalendDailyViewMain">.</td>
    <!-- ... -->
    <td data-dp-col="18" class="tblCalendDailyViewMain">.</td>
    <td data-dp-col="19" class="tblCalendDailyViewMain">.</td>
    <!-- ... -->
    <td data-dp-col="29" class="tblCalendDailyViewMain">.</td>
    <td data-dp-col="30" class="tblCalendDailyViewMain">.</td>
    <td data-dp-col="31" class="tblCalendDailyViewMain">.</td>
    <!-- ... -->
</tr>
<tr id="ivan@test.com_data_row" data-dp-employeeid="ivan@test.com" class="iCalTblRow">
    <td data-dp-col="0" class="iCalTblCell iCalTblEmployeeCell" id="header-ivan@test.com">
        <div class="rowHeaderCell"><a href="#" title="Display employee details"
            data-akfk-type="employee" id="ivan@test.com">Ivan</a>&nbsp;&nbsp;<img src="images/flags/country/italy.png">
        </div>
    </td>
    <td data-dp-col="1" class="tblCalendDailyViewMain">.</td>
    <td data-dp-col="2" class="tblCalendDailyViewMain">.</td>
    <!-- ... -->
    <td data-dp-col="18" class="tblCalendDailyViewMain iCalTblCellNow">.</td>
    <td data-dp-col="19" class="tblCalendDailyViewMain iCalTblCellNow">.</td>
    <!-- ... -->
    <td data-dp-col="29" class="tblCalendDailyViewMain">.</td>
    <td data-dp-col="30" class="tblCalendDailyViewMain">
        <div data-akfk-type="cell" data-dp-employeeid="ivan@test.com">
            <div class="shiftlightblue eventDailyContainer" data-akfk-type="eventContainer">
                <span id="event_1601789" data-akfk-type="event">
            AHOD</span></div>
        </div>
    </td>
    <td data-dp-col="31" class="tblCalendDailyViewMain">.</td>
    <!-- ... -->
</tr>
</table>

我试过了：

document.getElementsByClassName("groupCalendar")[0].textContent

这给了我所有的文本内容

“ 000102030405060708091011121314151617181920212223克莱尔 AHOD 莎莉伊万 AHOD ”

然后使用 split on'AHOD'尝试通过 split 获取 value first value。

我怀疑我需要将搜索范围缩小到表的 DOM 元素而不是整个表。然后在与搜索匹配的行中抓取和属性。

我不知道如何搜索关键字'AHOD'然后获取该员工的姓名？

标签： javascriptuserscriptstampermonkey

解决方案

我使用了这段代码（如下），但也会探索其他建议并尝试向他们学习： 

var results = '',
  trs = document.getElementsByTagName('tr');

for (var i = 0; i < trs.length; i++) {
  if (trs[i].innerHTML.indexOf('data-akfk-type="event">AHOD') > -1) {
    results += trs[i].getElementsByTagName('a')[0].textContent + "\n";
  }
}

console.log("Results: \n" + results)

感谢您的所有帮助，非常感谢。

推荐阅读