Adding Attribute to HTML element with jQuery

Question

Utilizing jQuery .children...

var strHtml = $(dt.row(row_idx).child()).children().children().html();

...to pass in the following HTML:

<tbody>
  <tr>
    <td>Notes:</td>
    <td>some info</td>
  </tr>
  <tr>
    <td>Assistance Required:</td>
    <td>Translation, writing and speaking capabilities </td>
  </tr>
  <tr>
    <td>Unit:</td>
    <td>not listed</td>
  </tr>
</tbody>

How do I grab the label cells (<td>Notes:</td>, <td>Assistance Required:</td>, <td>Unit:</td>) and move to their next corresponding value cell to add a colspan property to the <td> and then return the finished html?

The result should look like...

<tbody>
  <tr>
    <td>Notes:</td>
    <td colspan="12">some info</td>
  </tr>
  <tr>
    <td>Assistance Required:</td>
    <td colspan="12">Translation, writing and speaking capabilities </td>
  </tr>
  <tr>
    <td>Unit:</td>
    <td colspan="12">not listed</td>
  </tr>
</tbody>

I assume you don't have access to the code that is generating the html? — Erik Philips
– Erik Philips, Commented Jun 7, 2018 at 20:47
Correct, I do not have access to the code generating the html. — Kevin
– Kevin, Commented Jun 7, 2018 at 21:10

Scott Marcus · Accepted Answer · 2018-06-07 21:45:11Z

1

Take your string and load up a temporary element you create in memory only with that string.

You can use the :nth-child() pseudo-class selector to just select the second child <td> element in each row and then use the JQuery .attr() method to add an attribute to those elements:

var strHTML = `<table>
<tbody>
  <tr>
    <td>Notes:</td>
    <td>some info</td>
  </tr>
  <tr>
    <td>Assistance Required:</td>
    <td>Translation, writing and speaking capabilities </td>
  </tr>
  <tr>
    <td>Unit:</td>
    <td>not listed</td>
  </tr>
</tbody>
</table>`

// Create a temporary element in memory only
var temp = document.createElement("div");

// Load the string into the temp element
$(temp).html(strHTML);

// Now, you can search through the element

$("td:nth-child(2)", temp).attr("colspan", "12"); // Add the attribtue to the second td in each tr
console.log($(temp).html());  // Get the HTML contents of the <table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Jun 7, 2018 at 21:45

answered Jun 7, 2018 at 20:28

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kevin Over a year ago

I am fairly new to this, so I did not know about td:nth-child(2), but how do I run it against the HTML in my variable strHtml since I need to return the variable with adjusted HTML?

Kevin Over a year ago

So even though this is incorrect, in my mind the pseudo code is something like strHtml = $(strHTML).$("td:nth-child(2)").attr("colspan", "12");

Collectives™ on Stack Overflow

Adding Attribute to HTML element with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related