How to extract hyperlinks from table cells in row/column loop

user_8909963 0
Viewed 519

I have a JS function that writes the contents of a table on the page to a CSV file.

However, whenever I come across a table cell that has a hyperlink (e.g., <td><a href="https://www.example.com>Cell Value 1</a></td>), I need to write the href value (https://www.example.com in this case) and not the html text (Cell Value 1 in this case)

The code below shows a function that loops over rows and then columns. I have no problems creating a CSV this way, but am struggling to implement the "check" for <a href=""> values. 

<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);  
        }

If needed, a sample table is:

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

My goal was to implement an if-else where I would add the value of the href to the array is the table cell had one, or add the html text if not. However, the link variable is always undefined, even while iterating on a column that I know has an <a href="">.

Edit:

Following Taplar's suggestion that using $(this) in the for-loop was misguided, I came up with the following solution:

            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);
html-table jquery javascript
2 Answers

I aggree with Taplar about this. Bellow i think is what you are looking for.

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>

user_60503750

My solution was the following:

        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);
user_89099630
Related