时间戳

首页 > 解决方案 > 如何从行/列循环中的表格单元格中提取超链接

javascript - 如何从行/列循环中的表格单元格中提取超链接

问题描述

我有一个 JS 函数，可以将页面上表格的内容写入 CSV 文件。

但是，每当我遇到具有超链接（例如，<td><a href="https://www.example.com>Cell Value 1</a></td>）的表格单元格时，我需要编写 href 值（在本例中为https://www.example.com ）而不是html 文本（在此案子）

下面的代码显示了一个循环遍历行和列的函数。我以这种方式创建 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="">.

编辑：

按照 Taplar 的建议，$(this)在 for-loop 中使用是错误的，我想出了以下解决方案：

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

标签： javascriptjqueryhtml-table

解决方案

我同意 Taplar 关于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>

推荐阅读