我有一個帶有幾個tr元素的表格，我想在我的js中為第一個tr元素動態地添加一個新的td。
在添加 td 元素之前的表格。
<table>
<tbody>
<tr>
<td>A</td>
<tr>
<tr>
<td>D</td>
<tr>
<tbody>
<table>
我想要一個這樣的表格
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td> //新添加的元素
<tr>
<tr>
<td>D</td>
<tr>
<tbody>
<table>
我試著在我的js檔案中使用jquery在tr元素中回圈并添加一個新的td元素。像這樣 :
$('table').each(（index,tr）=> {
if(index === 0) {
tr.append("<td>B</td>") 。
}
});
但是沒有鎖。在我添加新td的地方，[Object object]被呈現在DOM中。
像這樣的情況。
請建議我如何動態地在tr中添加新的td。謝謝。
uj5u.com熱心網友回復：
你不需要一個回圈來解決這個問題。你可以使用很多選擇器/方法來定位第一個td的第一個tr。
考慮到你問題中的HTML結構，其中任何一個都可以作業：
$('table td:first').after('<td>B< /td> ');
$('<td>B</td>').insertAfter('table td:first') 。
$('table tr:first').append('<td>B</td> ')。
$('<td>B</td>').appendTo('table tr:first') 。
我確信還有其他的方法，但這讓你對采取的方法有一個概念。
uj5u.com熱心網友回復：
考慮一下下面的例子。
。$(function() {
function addCell（content, target） {
if(content == undefined) {
content = ""。
}
return $("<td>").html（內容）.appendTo（目標）。
}
addCell("B", $("table tbody tr:eq(0)")。
});<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<table>
<tbody>
<tr>/span>
<td>/span>A</td>/span>
</tr>/span>
<tr>/span>
<td>/span>D</td>/span>
</tr>/span>
</tbody>/span>
</table>/span>我懷疑你會有一個按鈕或其他機會來添加內容。創建一個小的函式可以讓這一切變得更容易一些。這個函式接受內容、你在單元格中想要的東西和目標。
最后一部分將是提供一個目標。這可以是一個HTML元素或一個jQuery物件。我為TABLE > TBODY > TR的選擇器提供了一個jQuery物件（即等于索引0）。
你也可以在一個回圈中使用它：
$("tbody tr").each(function(i, el){
if($("td:eq(0)", el).text() == "A") {
var b = addCell("B", el) 。
b.addClass（"dynamic"）。
}
});
uj5u.com熱心網友回復：
我在pure js中嘗試這樣做
這是我的代碼
HTML:-
<table>/span>
<tbody>/span>
<tr id="myTr">
<td>A</td>/span>
<tr>/span>
<tr>/span>
<td>/span>D</td>/span>
<tr>/span>
<tbody>/span>
<table>
Javascript:-
let myTr = document. getElementById("myTr"/span>)。
let data = ['B'/span>,'C'/span>]。
data.forEach(item => {
let td = document.createElement（"TD"）。
td.innerHTML = item;
myTr.appendChild（td）。
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/319950.html
標籤：