jquery 替换 td 内容
[英]jquery replace td contents
问题描述
i've searched for answers to my question with partial success but unfortunately the answer i found only changes one field not ALL fields.
我已经部分成功地搜索了我的问题的答案，但不幸的是，我发现的答案只更改了一个字段而不是所有字段。
I have a table on my website as follows:我的网站上有一张表格，如下所示：
<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>
This is generated by a PHP script, querying the details from a MySQL database.这是由 PHP 脚本生成的，从 MySQL 数据库查询详细信息。
What I would like to do is use jQuery to replace each of the following:我想做的是使用 jQuery 来替换以下各项：
<td id="demand">DL-001</td>
with和
<td id="demand"><a href="order.php?d=DL-001">DL-001</a></td>
Any help would be greatly appreciated!任何帮助将不胜感激！
Edit: Added jQuery from OP's comment:编辑：从 OP 的评论中添加了 jQuery：
$(".demand").text('text'); replaces all tds with class "demand" contents to 'text'.将所有带有“需求”类内容的 tds 替换为“文本”。
However when I use the following, it does not work:但是，当我使用以下内容时，它不起作用：
$(".demand").text('<a href=\'order.php?d=' + data[2] + '\'>' + data[2] + '</a>');
3 个解决方案
解决方案1
2 已采纳 2018-03-10 18:11:40
Change your ID's to classes - ID's in a DOM must be unique, and will cause problems with most javascript.将您的 ID 更改为类 - DOM 中的 ID 必须是唯一的，并且会导致大多数 javascript 出现问题。
Below is a working snippet, with the IDs changed, and sample jQuery that could be used to accomplish this.下面是一个工作片段，更改了 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>
解决方案2
0 2018-03-10 18:19:22
To achieve expected result, use below option of using jquery append要达到预期的结果，请使用以下使用 jquery 附加的选项
$(".demand").each(function(){
var val = $(this).text()
$(this).html('<a href="order.php?d='+val+'">'+val+'</a>')
})
https://codepen.io/nagasai/pen/zWxbqK https://codepen.io/nagasai/pen/zWxbqK
解决方案3
0 2018-03-10 18:19:58
Try this:尝试这个：
(function($) { var demands = $(".demand"); demands.each(function() { // Make sure to strip-off redundant calls to $(this) // Calling $(this) once suffices var el = $(this), txt = el.text(); el.html($("<a>", {href: 'order.php?d='+txt, text: txt})); }); })(jQuery);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <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> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.