Adding specific td to a specific row in a table with JQuery

Question

Considering the following code:

<tbody>
    <tr class="wsui-table-row-odd">
      <td>IamaTextFieldBox</td>
      <td class="im-label-required">Label required</td>
    </tr>
    <tr class="wsui-table-row-odd">
      <td>IamaTextFieldBox2</td>
      <td class="im-label-required">Label required2</td>
    </tr>
    <tr class="wsui-table-row-odd">
      <td>IamaTextFieldBox3</td>
      <td class="im-label-required">Label required3</td>
    </tr>
  </tbody>

The following script allows to create a new <tr class='tr00'> above each <tr class="wsui-table-row-odd"> and place the <td class="im-label-required"> in the newly created <tr>.

  $(document).ready(function() {
    $("tr.wsui-table-row-odd").parent().prepend("<tr class='tr00'>");
  $(".tr00").append($("td.im-label-required"));
});

Problem is it's placing all 3 <td class="im-label-required"> in each of the 3 newly created <tr class='tr00'>.

I would need the script to place solely the related <td class="im-label-required"> in its related <tr class='tr00'> like so:

<tbody>
    <tr class="tr00">
      <td class="im-label-required">Label required</td>
    </tr>
    <tr class="wsui-table-row-odd">
      <td>IamaTextFieldBox</td>
    </tr>
    <tr class="tr00">
      <td class="im-label-required">Label required2</td>
    </tr>
    <tr class="wsui-table-row-odd">
      <td>IamaTextFieldBox2</td>
    </tr>
    <tr class="tr00">
      <td class="im-label-required">Label required3</td>
    </tr>
    <tr class="wsui-table-row-odd">
      <td>IamaTextFieldBox3</td>
    </tr>
  </tbody>

It should display:

Label required
IamaTextFieldBox
Label required2
IamaTextFieldBox2
Label required3
IamaTextFieldBox3

Thank you for your help.

Are you sure it's IamaTextFieldBox? Because the HTML above has IamaTextFieldBo2, IamaTextFieldBox3 etc... See my updated answer. — zer00ne
– zer00ne, Commented May 2, 2017 at 12:26
@zer00ne Oh yes I edited it wrong. Thanks for the head's up. — The Hidden Soul
– The Hidden Soul, Commented May 2, 2017 at 12:59

Super User · Accepted Answer · 2017-05-02 12:27:26Z

2

Instead of prepend you can use insertBefore

$(document).ready(function() {
    $("<tr class='tr00'></tr>").insertBefore("tr.wsui-table-row-odd");
});

for detail reference you can check click here

$(document).ready(function() {
    $('.wsui-table-row-odd').each(function(index,el){
		var newLabel = "<tr class='tr00'><td colspan='2'>" + $(this).find('.im-label-required').html() + "</td></tr>";
		$(newLabel).insertBefore(el);
	})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="2">
<tbody>
	<tr class="wsui-table-row-odd">
	  <td>IamaTextFieldBox</td>
	  <td class="im-label-required">Label required</td>
	</tr>
	<tr class="wsui-table-row-odd">
	  <td>IamaTextFieldBox2</td>
	  <td class="im-label-required">Label required2</td>
	</tr>
	<tr class="wsui-table-row-odd">
	  <td>IamaTextFieldBox3</td>
	  <td class="im-label-required">Label required3</td>
	</tr>
</tbody>
</table>

**or if you want to move label: **

$(document).ready(function() {
    $('.wsui-table-row-odd').each(function(index,el){
	//	var newLabel = "<tr class='tr00'><td>" + $(this).find('.im-label-required').html() + "</td></tr>";
		$(el).find('.im-label-required').insertBefore(el);
	})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2" cellpadding="2">
<tbody>
	<tr class="wsui-table-row-odd">
	  <td>IamaTextFieldBox</td>
	  <td class="im-label-required">Label required</td>
	</tr>
	<tr class="wsui-table-row-odd">
	  <td>IamaTextFieldBox2</td>
	  <td class="im-label-required">Label required2</td>
	</tr>
	<tr class="wsui-table-row-odd">
	  <td>IamaTextFieldBox3</td>
	  <td class="im-label-required">Label required3</td>
	</tr>
</tbody>
</table>

edited May 2, 2017 at 12:27

answered May 2, 2017 at 11:15

Super User

9,6623 gold badges34 silver badges48 bronze badges

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

2 Comments

The Hidden Soul Over a year ago

@Super User Thanks it does the trick indeed in regards of the row creation (thanks for the doc) but not the label. $(".tr00").append($("td.im-label-required")); place all 3 found <td class="im-label-required"> in each of the 3 newly created rows. It duplicates them 3x. That is my issue, I would need to not duplicate them. I'd just need "label required1" in the first newly created <tr>, "label required2" in the second newly created <tr> ect..

The Hidden Soul Over a year ago

@Super User This is it thanks ! :) I've added remove to remove the old <td>

Collectives™ on Stack Overflow

Adding specific td to a specific row in a table 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