获取 JQuery 数据表单元格内锚标记的文本值

Question

我有 Table 元素，其中一个单元格带有锚标记。

我想获取每个单元格的锚标签的文本。

即如果一个 Cell 的值为 <a href=#>Hello</a> 那么我想得到的值为 Hello

参考这个post:

我以前有一个假人DOM

下面是我的工作，但它经常得到一个空白值或未定义。我该怎么做？

$(function() {
  var table = $('#sampleTable').DataTable();


  $('button').click(function() {
    var data = $('#sampleTable').dataTable().fnGetData();

    for (var i = 0; i < data.length; i++) {
      var rVal = data[i][0];
      console.log(rVal);
      //get all child contents
      var el = $('<div/>').html(rVal).contents();
      console.log(el);
      alert(el.find('a').text());
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="sampleTable">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href=#>R0C1</a></td>
      <td>R0C2</td>
      <td>R0C3</td>
    </tr>
    <tr>
      <td><a href=#>R1C1</a></td>
      <td>R1C2</td>
      <td>R1C3</td>
    </tr>
    <tr>
      <td><a href=#>R2C1</a></td>
      <td>R2C2</td>
      <td>R2C3</td>
    </tr>
  </tbody>
</table>
<button>
Click
</button>

Answer 1

您已经获得了 a 标签，即： var rVal = data[i][0]; 所以要获取文本，您只需使用 $(rVal).text() 或从 $('<div/>').html(rVal).contents() 获取文本，您可以使用 el.text().

演示代码 :

$(function() {
  var table = $('#sampleTable').DataTable();


  $('button').click(function() {
    var data = $('#sampleTable').dataTable().fnGetData();

    for (var i = 0; i < data.length; i++) {
      var rVal = data[i][0];
      console.log($(rVal).text());
      //get all child contents
      var el = $('<div/>').html(rVal).contents();
      console.log(el.text());
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="sampleTable">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href=#>R0C1</a></td>
      <td>R0C2</td>
      <td>R0C3</td>
    </tr>
    <tr>
      <td><a href=#>R1C1</a></td>
      <td>R1C2</td>
      <td>R1C3</td>
    </tr>
    <tr>
      <td><a href=#>R2C1</a></td>
      <td>R2C2</td>
      <td>R2C3</td>
    </tr>
  </tbody>
</table>
<button>
Click
</button>

获取 JQuery 数据表单元格内锚标记的文本值

Get the Text Value of a Anchor Tag inside a JQuery Datatable Cell

html

jquery

datatables