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

Posted 2023-05-09

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

【英文标题】：Get the Text Value of a Anchor Tag inside a JQuery Datatable Cell

【发布时间】：2021-08-16 16:51:51

【问题描述】：

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

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

即如果一个单元格的值为<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>

【问题讨论】：

试试：console.log(el.text()); 或 console.log($(rVal).text());

@Swati 谢谢！有效！如果您将其发布在下面作为答案，我可以将其标记为答案。

【参考方案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>