Question

我有一个正在生成的动态表，我无法改变。该表有一个复选框和旁边的标签。它们都在同一个内部，需要在同一个内部。我尝试了几种解决方案，但它们没有用。任何帮助将不胜感激。

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

我需要看起来像这样：

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

这是我一直在尝试的jquery：

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

Answer 1

一种方法：

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

参考文献：

JavaScript的：
- Node.parentNode。
jQuery的：
- insertAfter()。
- wrap()。

Answer 2

试试这个：

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

Answer 3

使用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>

Answer 4

jQuery不是最好的方法。它会很快变得凌乱。我建议使用模板引擎。只要您了解一些HTML，MustacheJS就非常容易学习。我建立了一个有效的例子。

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

数据：

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

模板：

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

使用Javascript：

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

输出：

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

Answer 5

你不能使用jQuery只插入html结束标记。

您必须为每一行添加额外的<td />，并将标签或输入移入其中。

您可以这样做：

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

如何使用jquery在两个元素之间追加一个结束标记和开始标记

5 个答案: