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

时间:2021-05-28 12:29:46

标签: html jquery datatables

我有表格元素,其中一个单元格带有锚标记。

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

即如果一个单元格的值为 <a href=#>Hello</a>,那么我想获得 Hello

的值

我曾经通过引用这个 post 来拥有一个虚拟 DOM:

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

JSFIDDLE

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

1 个答案:

答案 0 :(得分:1)

您已经获得了 a 标签,即: var rVal = data[i][0]; 所以要获取文本,您可以简单地使用 $(rVal).text() 或从 $('<div/>').html(rVal).contents() 获取文本,您可以使用 {{1} }.

演示代码

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