다음 코드를 고려 JQuery와

Question

있는 테이블의 특정 행에 특정 TD를 추가 :

는

<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="wsui-table-row-odd"> 위에 새 <tr class='tr00'>을 만들고 새로 <tr> 생성에 <td class="im-label-required">을 배치 할 수 있습니다.

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

문제점은 3 새로 생성 <tr class='tr00'> 각각 3 <td class="im-label-required">를 배치하는 것입니다.

나는과 같이 관련 <tr class='tr00'>에 전적으로 관련 <td class="im-label-required">을 배치 스크립트를 필요 :

<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 

당신의 도움에 감사드립니다. 대신 prepend의

Answer 1

당신은 ** 당신이 click here

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

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

을 확인할 수 있습니다 참조 세부 사항에 대한 insertBefore

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

사용하거나 라벨을 이동하려면 수 있습니다 **

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

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