有一個表，我想將其分成兩列。此列的單元格內容例如
| Miami: banana |
| Ft. Myers: pineapple |
現在我想把它分成兩列（和單元格），如下所示：
| Miami | banana | // <td> Miami </td><td> banana </td>
| Ft. Myers | pineapple | // <td> Ft. Myers </td><td> pineapple </td>
我制作了一個 JavaScript 來實作這一點：
function foo(str) {
result = str.replace(": ", "</td><td>");
}
$("td.valueCol").each(function(){
$("td.valueCol").html(foo($(this).text()));
}
然而結果是：
| bananas | // <td>bananas</td>
| pineapple | // <td>pineapple</td>
當我使用未決議的標簽測驗它時result = str.replace(": ", "</xt><xt>")，標簽被交換并且引號被添加到標簽之前的部分：
| Miamibarbananas | // <td>"Miamibar"<xt>bananas</xt></td>
| Ft. Myersbarpineapple |
顯然replace或html()應用某種消毒。這是什么，我必須做些什么才能使其正常作業？
uj5u.com熱心網友回復：
我只是用一些 Vanilla JavaScript 玩了一下，結果發現它.outerHTML可能在這里“成為你的朋友”：
document.querySelectorAll("td")
.forEach(td=>td.outerHTML=td.outerHTML.replace(":","</td><td>"))TD {border: 1px solid grey}<table>
<tr><td>a:b</td><td>v:d</td><td>ef</td></tr>
<tr><td>f:h</td><td>i:j</td><td>kl</td></tr>
<tr><td>m:n</td><td>o:p</td><td>rs</td></tr>
</table>uj5u.com熱心網友回復：
您可以使用 jQuery 的insertAfter()在要拆分的 TD 旁邊創建一個新的 TD。
$('table td').each(function() {
let v = $(this).text().split(':');
if (v.length > 1) {
$(this).text(v[0]);
$(`<td>${v[1]}</td>`).insertAfter($(this))
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
<tr>
<td>Miami: banana</td>
<td>Ft. Myers: pineapple</td>
</tr>
</table>uj5u.com熱心網友回復：
首先，我想說的是，當您選擇所有 td 元素并在其中嵌套更多 td 時，這是無效的 html，盡管瀏覽器會對此進行排序，所以我想出的是選擇所有行并通過拆分陣列在一個級別中創建新的 td以下面的方式
$("tr").each(function(){
// iterate once per row
let values = $(this).text().split(":"),
newMarkup = ""
values.forEach(function(each){newMarkup = "<td>" each.trim() "</td>"})
$(this).html(newMarkup)
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
tr,td {
border:1px solid black;
padding:2px;
}
td {padding:5px;}
</style>
<table>
<tbody>
<tr><td>Miami: banana</td></tr>
<tr><td>Ft. Myers: pineapple</td></tr>
</tbody>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/460657.html
標籤：javascript html jQuery