Can we insert td attribute dynamically through jquery

Is it possible to insert td attribute (data-th=“Name”) dynamically through Jquery, means in each td text should be copied through jquery…

I dont want to give again and again (data-th=“Name”) in HTML i need to handle this through jquery, I tried something but not worked, is it possible through jquery, please suggest me…

<table class="mytable table-bordered table-striped table-condensed">
	<thead>
		<tr>
			<th scope="col">Name </th>
		       <th scope="col">Company</th>
			<th scope="col">Description</th>
			<th scope="col">Actions</th>
		</tr>
	</thead>
       <tbody>
						<tr>
								<td data-th="Name">Paul OB</td>
								<td data-th="Company">Acme Trading</td>
								<td data-th="Description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p></td>
								<td data-th="Actions"><img src="img/check.png"></td>
						</tr>
						<tr>
								<td data-th="Name">Fred Flinstone</td>
								<td data-th="Company">Bedrock</td>
								<td data-th="Description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis lobortis libero.</p></td>
								<td data-th="Actions"><img src="img/check.png"></td>
						</tr>
						<tr>
								<td data-th="Name">Paul OB</td>
								<td data-th="Company">Acme Trading</td>
								<td data-th="Description"><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
								<td data-th="Actions"><img src="img/check.png"></td>
						</tr>
				</tbody>
			</table>

Your answer is the attr() method. This should do the trick:

$('td').attr('data-th', 'Name');

Edit:

If you want different attributes like in your example, you should also use :nth-child selector:

$("td:nth-child(1)").attr('data-th', 'Name');
$("td:nth-child(2)").attr('data-th', 'Company');
$("td:nth-child(3)").attr('data-th', 'Description');
$("td:nth-child(4)").attr('data-th', 'Actions');

Beware that :nth-child index starts with 1 not 0.

Thanks for your reply AdrainSandu,

instead of declaring :nth-child selector again and again can we not call (th) text directly in to (“td:nth-child(1)”).attr(‘data-th’, ‘Name’); (2) why we should write $(“td:nth-child(1)”) repeatedly, can we write short code, where we can nesting td:nth-childs with (th) text…

We still need four statements for each different attribute. Now, I’m pretty sure this can be made more elegant, perhaps with an array containing the attribute list and some loops, but JavaScript (and by extension jQuery) is not one of my main interests.

Ok here’s my attempt :smile:

I use jquery to get the headings inside the thead and then loop through the tbody to add the data attributes as required.

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
(function() {
    var header = Array();
    //first get the data from the headings
    $(".mytable thead th").each(function(i, v) {
            header[i] = $(this).text();
        })
        //now loop through table rows and apply headings to the td in each row
    $(".mytable tbody tr").each(function(i, v) {
        var myRow = $(this);

        myRow.find('td').each(function(j) {
            $(this).attr('data-th', header[j]);
           
        })
    })
}());
</script>



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style></style>
</head>

<body>
<table class="mytable table-bordered table-striped table-condensed">
  <thead>
    <tr>
      <th scope="col">Name </th>
      <th scope="col">Company</th>
      <th scope="col">Description</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >Paul OB</td>
      <td >Acme Trading</td>
      <td ><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p></td>
      <td >Cell 4</td>
    </tr>
    <tr>
      <td>Fred Flinstone</td>
      <td>Bedrock</td>
      <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis lobortis libero.</p></td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Paul OB</td>
      <td>Acme Trading</td>
      <td><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
(function() {
    var header = Array();
    //first get the data from the headings
    $(".mytable thead th").each(function(i, v) {
            header[i] = $(this).text();
        })
        //now loop through table rows and apply headings to the td in each row
    $(".mytable tbody tr").each(function(i, v) {
        var myRow = $(this);

        myRow.find('td').each(function(j) {
            $(this).attr('data-th', header[j]);
            $(this).addClass('test');
        })
    })
}());
</script>
</body>
</html>

Note that there is no error checking so if you have ‘th’ elements inside a tbody, or multiple tbodys, or rowspans or colspans then you will need much more involved code than this.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.