Question

考虑以下代码：

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

以下脚本允许在每个<tr class='tr00'>上方创建新的<tr class="wsui-table-row-odd">，并将<td class="im-label-required">放入新创建的<tr>。

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

问题是，在3个新创建的<td class="im-label-required">中，每个<tr class='tr00'>都放置了3 <td class="im-label-required">。

我需要脚本只将相关的<tr class='tr00'>放在相关的<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>中，如下所示：

Label required
IamaTextFieldBox
Label required2
IamaTextFieldBox2
Label required3
IamaTextFieldBox3

应显示：

class CallableObjectDynamic {
    def call() {
        return "5"
    }
}


class MyClassDynamic {
    CallableObjectDynamic field = new CallableObjectDynamic()
}

class GroovyRunnerDynamic {
    static String make(int arg1) {
        MyClassDynamic x = new MyClassDynamic()
        return x.field()
    }
}

感谢您的帮助。

Answer 1

您可以使用prepend

代替insertBefore

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

有关详细信息，请查看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>

**或者如果你想移动标签：**

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

使用JQuery将特定td添加到表中的特定行

1 个答案: