CODEWITHSUNDEEP
jquery
Leonidas
Leonidas

Reputation: 3

How to append a closing and opening <td> tag inbetween 2 elements with jquery

I have a dynamic table that is being generated that I cannot alter. The table has a checkbox and a label next to it. They are both within the same and need to be in their own within the same . I have tried several solutions but they have not worked. Any help would be greatly appreciated. 

<tr>
    <td>
        <input type="checkbox" value="1" name="check1" id="someID">   
        <label for="question">label</label>
    </td>
<tr>
<tr>
    <td>
        <input type="checkbox" value="1" name="check2" id="someID2">   
        <label for="question">label</label>
    </td>
<tr>

I need to it look like this:

<tr>
    <td>
        <input type="checkbox" value="1" name="check1" id="someID"> 
    </td>
    <td>  
        <label for="question">label</label>
    </td>
<tr>
<tr>
    <td>
        <input type="checkbox" value="1" name="check2" id="someID2">  
    </td>
    <td>   
        <label for="question">label</label>
    </td>
<tr>

Here is the jquery that I have been trying:

$("</td>").insertAfter(".form-group td input");

Upvotes: 0

Views: 873

Answers (5)

Mohamadjavad Vakili
Mohamadjavad Vakili

Reputation: 3348

try this:

$('table tr').find('label,input').unwrap().wrap( "<td />" );

Upvotes: 1

Christian
Christian

Reputation: 2200

jQuery is not the best way to do it. It is going to get messy pretty fast. I would recommend using a template engine. MustacheJS is really easy to learn as long as you know some HTML. I built a working example.

http://jsfiddle.net/christianjuth/t0s6x617/

Data:

var data = {
  table: [
    // table row
    [
      '<input>',
      '<label>Input</label>'
    ],
    // table row
    [
      '<input>',
      '<label>Input</label>'
    ]
  ]
}

Template:

<table>
  {{#table}}
    <tr>
    {{#.}}
        <td>
            {{{.}}}
        </td>
    {{/.}}
    </tr>
  {{/table}}
 </table>

Javascript:

var html = Mustache.render($('#table').html(), data);
$('body').append(html);

Output:

<table>
  <tbody>
    <tr>
      <td>
        <input>
      </td>
      <td>
        <label>Input</label>
      </td>
    </tr>
    <tr>
      <td>
        <input>
      </td>
      <td>
        <label>Input</label>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

d79
d79

Reputation: 3848

Using jQuery:

$('label').each(function(){   
    $(this).parent().after('<td/>').next().append($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
    <td>
        <input type="checkbox" value="1" name="check1" id="someID">   
        <label for="question">label</label>
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" value="1" name="check2" id="someID2">   
        <label for="question">label</label>
    </td>
</tr>
</table>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

One approach:

// select the <label> that immediately follows an <input>
// within a <td> element, iterate over the returned collection:
$('td input + label').each(function() {
  // move the <label> after its parent <td> element,
  // wrap the <label> with a <td>:
  $(this).insertAfter(this.parentNode).wrap('<td></td>');
});


$('td input + label').each(function() {
  $(this).insertAfter(this.parentNode).wrap('<td></td>');
});
td {
  border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" value="1" name="check1" id="someID">
        <label for="question">label</label>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="1" name="check2" id="someID2">
        <label for="question">label</label>
      </td>
    </tr>
  </tbody>
</table>

References:

Upvotes: 2

Martin Vich
Martin Vich

Reputation: 1082

You cannot use jQuery to insert just html end tag.

You'd have to add extra <td /> to each row and move the label or input into it.

You can do something like this:

$("#yourtableid tr").each(function (index, element) {
var newCell = $("<td />");
var label = $(element).find("label").detach();
newCell.append(label);
$(element).append(newCell);
});

Upvotes: -1

Related Questions