javascript - jquery 替换 td 内容

Question

我搜索了我的问题的答案并取得了部分成功，但不幸的是我找到的答案只改变了一个字段而不是所有字段。

我的网站上有如下表格:

<table>
<tr>
<td>1</td>
<td id="demand">DL-001</td>
<td>Description 1</td>
</tr>
<tr>
<td>2</td>
<td id="demand">DL-002</td>
<td>Description 2</td>
</tr>
<tr>
<td>3</td>
<td id="demand">DL-003</td>
<td>Description 3</td>
</tr>
</table>

这是由 PHP 脚本生成的，从 MySQL 数据库查询详细信息。

我想做的是使用 jQuery 替换以下各项:

<td id="demand">DL-001</td>

与

<td id="demand"><a href="order.php?d=DL-001">DL-001</a></td>

如有任何帮助，我们将不胜感激!

编辑:从 OP 的评论中添加了 jQuery:

$(".demand").text('text'); 将所有具有类“demand”内容的 tds 替换为“text”。

但是，当我使用以下内容时，它不起作用:

$(".demand").text('<a href=\'order.php?d=' + data[2] + '\'>' + data[2] + '</a>');

Answer 1

将您的 ID 更改为类 - DOM 中的 ID 必须是唯一的，并且会导致大多数 javascript 出现问题。

下面是一个工作代码段，其中 ID 已更改，以及可用于完成此操作的示例 jQuery。

// no-conflict safe document ready
jQuery(function($) {
  // loop over all td's with the class of demand
  $('td.demand').each(function() {
    // load the DL-XXX into a variable (since it's used more than once)
    var dl = $(this).text();
    // change the td html to the link, referencing the DL-XXX number
    $(this).html('<a href="order.php?dl=' + dl + '">' + dl + '</a>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td class="demand">DL-001</td>
    <td>Description 1</td>
  </tr>
  <tr>
    <td>2</td>
    <td class="demand">DL-002</td>
    <td>Description 2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class="demand">DL-003</td>
    <td>Description 3</td>
  </tr>
</table>