Как извлечь гиперссылки из ячеек таблицы в цикле строки / столбца - PullRequest
Новая
       4

Как извлечь гиперссылки из ячеек таблицы в цикле строки / столбца

2 голосов
/ 18 октября 2019

У меня есть функция JS, которая записывает содержимое таблицы на странице в файл CSV.

Однако, когда я сталкиваюсь с ячейкой таблицы, которая имеет гиперссылку (например, <td><a href="https://www.example.com>Cell Value 1</a></td>), мне нужно записать значение href (https://www.example.com в этом случае), а не HTML-текст (в данном случае значение ячейки 1)

В приведенном ниже коде показана функция, которая циклически перебирает строки, а затем столбцы. У меня нет проблем с созданием CSV таким способом, но я пытаюсь реализовать «проверку» для значений <a href="">. 

<script>
    function downloadCSV() {
        var table = document.getElementById("table-example");

        // Array of rowData arrays
        var results = []; 
        // holds data from each table row
        var rowData;

       //iterate through rows, skipping header 
        for (var i = 1, row; row = table.rows[i]; i++) {
            rowData = [];

            //iterate through columns
            for (var j = 0, col; col = row.cells[j]; j++) {

                // Checking for href and extracing link
                let link = $(this).find('a').attr('href');
                console.log(link);

                if () {
                     ....
                }

                else {
                    rowData.push(col.textContent);
                }   
            }
            results.push(rowData);  
        }

При необходимости, образец таблицы: 

<button onClick="downloadCSV()">Download CSV</button>

<table id="table-example">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="https://www.example.com">Tiger Nixon</a></td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
        </tbody>
</table>

Моя цель состояла в том, чтобы реализовать if-else, где я бы добавил значение href в массив:ячейка таблицы имеет один, или добавьте HTML-текст, если нет. Тем не менее, переменная link всегда не определена, даже при итерации по известному мне столбцу есть <a href="">.

Edit :

Следуя предложению Таплара, чтоиспользование $(this) в цикле for было ошибочным, я нашел следующее решение: 

            for (var j = 0, col; col = row.cells[j]; j++) {

                // Checking for href and extracing link
                var links = col.getElementsByTagName('a');

                if (links.length > 0) {
                    var cellData = links[0].getAttribute('href');
                } else {
                    var cellData = col.textContent;
                }

                rowData.push(cellData);

Ответы [ 2 ]

2 голосов
/ 18 октября 2019

Я согласен с Тапларом около this. Ниже я думаю, что вы ищете. 

function downloadCSV() {

  var table = document.getElementById("table-example");

  // Array of rowData arrays
  var results = [];
  // holds data from each table row
  var rowData;

  for (var i = 1; row = table.rows[i]; i++) {
    rowData = [];

    //iterate through columns
    for (var j = 0, col; col = row.cells[j]; j++) {
      var cell = $(row.cells[j]);

      var hashref = cell.find('a');
      // Cause it get a collection
      if (hashref.length > 0 && hashref.length === 1) {
        rowData.push(hashref.attr('href'));
      } else {
        rowData.push(col.textContent);
      }
    } // end for cell
    results.push(rowData);
  } // end row

  console.log(results);

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="downloadCSV()">Download CSV</button>

<table id="table-example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="https://www.example.com">Tiger Nixon</a></td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 18 октября 2019

Мое решение было следующим: 

        for (var j = 0, col; col = row.cells[j]; j++) {

            // Checking for href and extracing link
            var links = col.getElementsByTagName('a');

            if (links.length > 0) {
                var cellData = links[0].getAttribute('href');
            } else {
                var cellData = col.textContent;
            }

            rowData.push(cellData);
...