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

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

Оригинал 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>

источник

2009-11-03 claya

Вам действительно нужно иметь другую таблицу в ячейке таблицы? –

Да, у оригинального myitem1 может быть несколько td, я хочу держать вместе в форматировании – claya

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

$('tr').each(function() { 
    $(this).children().wrapAll('<td><table><tr></tr></table></td>'); 
    $(this).append('<td><input type="button" value="click1"></td>'); 
});

источник

2009-11-03 01:43:20 tvanfosson

приятный и чистый, возможно, добавить [id^= 'myitem'] check – jitter

Похоже, что он применялся ко всем строкам ко мне. – tvanfosson

круто спасибо за решение, которое я раньше не использовал wrapAll, я дам ему попробовать – claya

-1

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

Селектор < тег > [ < атр >^= ' < префикс >'] выбирает все элементы с атрибутом tagattr, который начинается с 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>

Надеется, что это помогает.

источник

2009-11-03 01:46:10 NawaMan

, спасибо, что я сделал что-то подобное, но this.html() теряет значения выбора формы, поэтому я не мог его использовать. – claya

??? Не могли бы вы подробнее рассказать о том, как вы его потеряете? У вас есть форма, закрывающая всю таблицу другим компонентом ввода? – NawaMan

, если пользователь выбрал элемент из выпадающего списка, эта информация не будет перенесена в строку вывода .html() – claya

<script> 
$(function(){ 
    var flowbox_table = $('img.flowbox').wrap('<table />'); 
    var flowbox_tr = $(flowbox_table).wrap('<tr />'); 
    var flowbox_td = $(flowbox_tr).wrap('<td />'); 
}); 
</script>

источник

2012-12-06 23:14:57

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

ответ

Смежные вопросы