简体   繁体   中英

How to click anchor tag that is inside of a table using JavaScript

I am working on an iOS app where there is an option to view the calendar. The user can view what is on the calendar for today, but if the user wants to see what's on the previous or next day of the calendar, he can't since there is no functionality for it. The developer of the website does not provide an API. So I have to scrape the elements in order to get the information. I found that on the site that there is a table where the user can select a date to go to. But I am not sure how to evaluate a javascript for this task. I am trying to pass a number that the user selects and have a string of javascript that will evaluate the string of the javascript. Is there a way to select an anchor tag then click on? Thank you.

Here is the code.

<table class="ui-datepicker-calendar">
  <thead>
    <tr>
      <th class="ui-datepicker-week-col">Wk</th>
      <th scope="col"><span title="Monday">Mo</span></th>
      <th scope="col"><span title="Tuesday">Tu</span></th>
      <th scope="col"><span title="Wednesday">We</span></th>
      <th scope="col"><span title="Thursday">Th</span></th>
      <th scope="col"><span title="Friday">Fr</span></th>
      <th scope="col" class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
      <th scope="col" class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="ui-datepicker-week-col">6</td>
      <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">1</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">2</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">3</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">4</a></td>
      <td class=" ui-datepicker-week-end ui-datepicker-days-cell-over  ui-datepicker-current-day ui-datepicker-today"
        data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default ui-state-highlight ui-state-active" href="#">5</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2019">
        <a class="ui-state-default" href="#">6</a></td>
    </tr>
    <tr>
      <td class="ui-datepicker-week-col">7</td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">7</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">8</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">9</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">10</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">11</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2019">
        <a class="ui-state-default" href="#">12</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2019">
        <a class="ui-state-default" href="#">13</a></td>
    </tr>
    <tr>
      <td class="ui-datepicker-week-col">8</td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">14</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">15</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">16</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">17</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">18</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2019">
        <a class="ui-state-default" href="#">19</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2019">
        <a class="ui-state-default" href="#">20</a></td>
    </tr>
    <tr>
      <td class="ui-datepicker-week-col">9</td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">21</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">22</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">23</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">24</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">25</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2019">
        <a class="ui-state-default" href="#">26</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="9" data-year="2019">
        <a class="ui-state-default" href="#">27</a></td>
    </tr>
    <tr>
      <td class="ui-datepicker-week-col">10</td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">28</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">29</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">30</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="9" data-year="2019"><a
          class="ui-state-default" href="#">31</a></td>
      <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
      <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;
      </td>
      <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;
      </td>
    </tr>
  </tbody>
</table>

I have done this before with a website to prevent people from web scraping the website. What I did is something similar to this where the anchor href is redirecting the page. But I used a click event that will get the text value inside of the anchor, and I use a javascript function to present the data that I want from the passed value from the anchor. Use the developer tool to see how the page act. For me, I would look at the javascript files.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM