1

I'm trying to get the employee name from a table where the row contains data-akfk-type="event">AHOD with a Tampermonkey userscript.

For example in the table below this should return 'Clare' and 'Ivan' as each of those rows has data-akfk-type="event">AHOD

The table will always have two rows that contain 'AHOD' but they could be on any row in the table.

<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>

I've tried:

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

which gives me all the text content

"   000102030405060708091011121314151617181920212223Clare                                AHOD  Sally Ivan                                 AHOD  "

Then used split on 'AHOD' to try and grab the value first value by split.

I suspect I need to narrow down my search to a DOM element of the table and not the entire table. Then grab and attribute in the row that matches the search.

I don't know how to search for the keyword 'AHOD' and then get the name of that employee?

double-beep
  • 5,031
  • 17
  • 33
  • 41
Jason S
  • 11
  • 2
  • Welcome to Stackoverflow. Its good to include code, but there is a lot and I formatted it so its readable. Maybe try to include just enough code to illustrate your problem ... in this case I doubt that the full HTML table was needed? – bcperth Oct 29 '18 at 11:13

3 Answers3

0

you need to loop through every tr, see the code below

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)
<table>

<tr id="clare@test.com_data_row" data-dp-employeeid="clare@test.com" class="iCalTblRow">
  <td data-dp-col="0" class="iCalTblCell iCalTblEmployeeCell" style="white-space:nowrap;" id="header-clare@test.com">
    <div class="cell rowHeaderCell" style="width: 148px;"><a href="#" title="Display employee details" onclick="iCal_showEmployeeInfo(this,event);return false;" data-akfk-type="employee" id="clare@test.com">Clare</a>&nbsp;&nbsp;<img height="16" width="20" src="images/flags/country/spain.png" alt="Spain">
    </div>
  </td>
  <td data-dp-col="0" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="1" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="2" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="3" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="4" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="5" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="6" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="7" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="8" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="9" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="10" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="11" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="12" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="13" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="14" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="15" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="16" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="17" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="18" class="tblCalendDailyViewMain iCalTblCellNow" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="19" class="tblCalendDailyViewMain iCalTblCellNow" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="20" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="21" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="22" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="23" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="24" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="25" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="26" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="27" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="28" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="29" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="30" class="tblCalendDailyViewMain" colspan="16" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" data-akfk-type="cell" data-dp-employeeid="clare@test.com" style="width:255px">
      <div class="shiftlightblue eventDailyContainer" data-akfk-type="eventContainer" style="height:1.6em;padding-top:0.6em"><span id="event_1601787" data-akfk-type="event">AHOD</span></div>
    </div>
  </td>
  <td data-dp-col="31" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="32" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </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" style="white-space:nowrap;" id="header-sally@test.com">
    <div class="cell rowHeaderCell" style="width: 148px;"><a href="#" title="Display employee details" onclick="iCal_showEmployeeInfo(this,event);return false;" data-akfk-type="employee" id="sall@test.com">Sally</a>&nbsp;&nbsp;<img height="16" width="20" src="images/flags/country/united_arab_emirates.png"
        alt="United Arab Emirates"></div>
  </td>
  <td data-dp-col="1" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="2" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="3" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="4" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="5" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="6" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="7" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="8" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="9" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="10" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="11" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="12" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="13" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="14" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="15" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="16" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="17" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="18" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="19" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="20" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="21" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="22" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="23" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="24" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="25" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="26" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="27" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="28" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="29" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="30" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="31" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="32" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="33" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="34" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="35" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="36" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="37" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="38" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="39" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="40" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="41" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="42" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="43" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="44" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="45" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="46" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="47" class="tblCalendDailyViewMain" style="border-left:1px solid #BEC7CC">
    <div style="width:15px"></div>
  </td>
  <td data-dp-col="48" class="tblCalendDailyViewMain" style="border-left: 1px solid rgb(190, 199, 204);">
    <div style="width:15px"></div>
  </td>
</tr>



<tr id="ivan@test.com_data_row" data-dp-employeeid="ivan@test.com" class="iCalTblRow" style="">
  <td data-dp-col="0" class="iCalTblCell iCalTblEmployeeCell" style="white-space:nowrap;" id="header-ivan@test.com">
    <div class="cell rowHeaderCell" style="width: 148px;"><a href="#" title="Display employee details" onclick="iCal_showEmployeeInfo(this,event);return false;" data-akfk-type="employee" id="ivan@test.com">Ivan</a>&nbsp;&nbsp;<img height="16" width="20" src="images/flags/country/italy.png" alt="Italy"></div>
  </td>
  <td data-dp-col="0" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="1" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="2" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="3" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="4" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="5" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="6" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="7" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="8" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="9" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="10" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="11" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="12" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="13" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="14" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="15" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="16" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="17" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="18" class="tblCalendDailyViewMain iCalTblCellNow" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="19" class="tblCalendDailyViewMain iCalTblCellNow" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="20" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="21" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="22" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="23" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="24" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="25" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="26" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="27" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="28" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="29" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="30" class="tblCalendDailyViewMain" colspan="16" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" data-akfk-type="cell" data-dp-employeeid="ivan@test.com" style="width:255px">
      <div class="shiftlightblue eventDailyContainer" data-akfk-type="eventContainer" style="height:1.6em;padding-top:0.6em"><span id="event_1601789" data-akfk-type="event">AHOD</span></div>
    </div>
  </td>
  <td data-dp-col="31" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
  <td data-dp-col="32" class="tblCalendDailyViewMain" style="vertical-align:top;border-left:1px solid #BEC7CC">
    <div class="cell" style="width:15px">&nbsp;</div>
  </td>
</tr>

</table>
ewwink
  • 18,382
  • 2
  • 44
  • 54
0

Use jQuery to laser-target the "AHOD" nodes and then traverse the tree to find the data you want:

var ahodNodes = $("span[data-akfk-type='event']:contains('AHOD')");
//-- Get the desired related text for each:
ahodNodes.each ( (J, zNode) => {
    var parentRow       = $(zNode).closest ("tr.iCalTblRow");
    var employeeCell    = parentRow.find (".iCalTblEmployeeCell");
    var employeeName    = employeeCell.text ().trim ();
    console.log ("employeeName: ", employeeName);
} );

This also makes it easier to transition to pages that are AJAX-driven (more below).

A complete working script (It's just the part above the ****** block). :
To see it in action, Run the code snippet.

// ==UserScript==
// @name     _Get AHOD employees
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.
/* global $ */
/* eslint-disable no-multi-spaces */

var ahodNodes = $("span[data-akfk-type='event']:contains('AHOD')");
//-- Get the desired related text for each:
ahodNodes.each ( (J, zNode) => {
    var parentRow       = $(zNode).closest ("tr.iCalTblRow");
    var employeeCell    = parentRow.find (".iCalTblEmployeeCell");
    var employeeName    = employeeCell.text ().trim ();
    console.log ("employeeName: ", employeeName);
} );

/********************************************************************
******* EVERYTHING below this block is simulated target page. *******
******* It's NOT part of the userscript.                      *******
********************************************************************/
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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>

For AJAX-driven pages, the transition is easy:

// ==UserScript==
// @name     _Get AHOD employees
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.
/* global $, waitForKeyElements */
/* eslint-disable no-multi-spaces */

waitForKeyElements ("span[data-akfk-type='event']:contains('AHOD')", getEmployeeName);

function getEmployeeName (jNode) {
    var parentRow       = jNode.closest ("tr.iCalTblRow");
    var employeeCell    = parentRow.find (".iCalTblEmployeeCell");
    var employeeName    = employeeCell.text ().trim ();
    console.log ("employeeName: ", employeeName);
}
Community
  • 1
  • 1
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
0

I used this code (below) but will also explore the other suggestions and try and learn from them too:

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) 

Thank you for all your help, very much appreciated.

Jason S
  • 11
  • 2