CODEWITHSUNDEEP
javascriptjquery
Damien Richardson
Damien Richardson

Reputation: 23

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.

What I would like to do is use jQuery to replace each of the following:

<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:

$(".demand").text('text'); replaces all tds with class "demand" contents to 'text'.

However when I use the following, it does not work: 

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

Upvotes: 2

Views: 3042

Answers (3)

baeyun
baeyun

Reputation: 228

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>

Upvotes: 0

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below option of using jquery append

$(".demand").each(function(){
  var val = $(this).text()
  $(this).html('<a href="order.php?d='+val+'">'+val+'</a>')
})

https://codepen.io/nagasai/pen/zWxbqK

Upvotes: 0

random_user_name
random_user_name

Reputation: 26160

Change your ID's to classes - ID's in a DOM must be unique, and will cause problems with most javascript.

Below is a working snippet, with the IDs changed, and sample jQuery that could be used to accomplish this.

// 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>

Upvotes: 3

Related Questions