jQuery как обернуть ячейку таблицы

Я бы добавил обертку вокруг строки с помощью jquery. Я сделал несколько попыток, но не могу. Я могу только через HTML-шаблон и заполнение, но при выполнении orig.html() я теряю все значения выбора ввода, которые были там.

Оригинальный html:

    <table><tbody>
  <tr id="myitem1"><td>I need a coat1</td></tr>
  <tr id="myitem2"><td>I need a coat2</td></tr></tbody></table>

=== Я хочу использовать jQuery, чтобы обернуть строки и добавить ячейку кнопки и получить результат:

 <table><tbody>
  <tr id="myitem1">
   <td>
    <table><tbody>
     <tr><td>I need a coat1</td></tr>
    </tbody></table>
   </td>
   <td><input type="button" value="click1"></td>     
  </tr>
  <tr id="myitem2">
   <td>
    <table><tbody>
     <tr><td>I need a coat2</td></tr>
    </tbody></table>
   </td>
   <td><input type="button" value="click1"></td>
  <tr>
</tbody></table>

jquery html-table wrapper
person claya    schedule 03.11.2009    source источник
comment
вам действительно нужно иметь еще одну таблицу в ячейке таблицы?   -  person Martin Ongtangco    schedule 03.11.2009
comment
да, у исходного myitem1 может быть несколько td, которые я хочу сохранить вместе при форматировании   -  person claya    schedule 03.11.2009

Ответы (2)


arrow_upward
2
arrow_downward

Я предполагаю, что вы хотите взять все столбцы в каждой строке, обернуть их в таблицу внутри одного столбца, а затем добавить столбец в строку.

$('tr').each( function() {
   $(this).children().wrapAll('<td><table><tr></tr></table></td>');
   $(this).append('<td><input type="button" value="click1"></td>');
});
person tvanfosson    schedule 03.11.2009
comment
красиво и чисто, возможно, добавьте проверку [id^='myitem'] - person jitter; 03.11.2009
comment
Похоже, это относилось ко всем строкам для меня. - person tvanfosson; 03.11.2009
comment
круто, спасибо за решение, я раньше не использовал wrapAll, я попробую - person claya; 03.11.2009

arrow_upward
-1
arrow_downward

Используйте tr[id^='myitem'], чтобы выбрать его.

Селектор ‹tag›[‹attr›^='‹prefix›'] выбирает все элементы tag с атрибутом attr, которые начинаются с prefix.

Вот весь код:

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script>

function template(pStr, pAttrs) {
    return pStr.replace(/{\$([^}]*)\$}/g, function (a, pName) {
        return pAttrs[pName];
    });
}

const TDReplaceTemplate =
"   <td>"                                              + "\n" +
"    <table><tbody>"                                   + "\n" +
"     <tr>{$OrgTD$}</tr>"                              + "\n" +
"    </tbody></table>"                                 + "\n" +
"   </td>"                                             + "\n" +
"   <td><input type=\"button\" value=\"click1\"></td>" + "\n";

$(document).ready(function() {
    $("tr[id^='myitem']").each(function(aTR) {
        const aOrgTD = $(this).html();
        const aNewTD = template(TDReplaceTemplate, { OrgTD: aOrgTD } );
        $(this).html(aNewTD);
    });
});
</script>
</head>
<body>
<table><tbody>
  <tr id="myitem1"><td>I need a coat1</td></tr>
  <tr id="myitem2"><td>I need a coat2</td></tr>
</tbody></table>
</body>
</html>

Надеюсь это поможет.

person NawaMan    schedule 03.11.2009
comment
спасибо, я сделал что-то подобное, но this.html() теряет все значения выбора формы, поэтому я не мог его использовать. - person claya; 03.11.2009
comment
??? Не могли бы вы подробнее рассказать, как вы его теряете? У вас есть форма снаружи, обертывающая всю таблицу другим компонентом ввода? - person NawaMan; 03.11.2009
comment
если пользователь выбрал элемент из выпадающего списка, эта информация не будет перенесена в выходную строку .html(). - person claya; 03.11.2009