使用 jquery 和 js 將元素動態添加到元素中

Question

我有幾個 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> //Newly addded element
        <tr>
        <tr>
            <td>D</td>
        <tr>
    <tbody>
<table>

我嘗試循環遍歷 tr 元素並在我的 js 文件中使用 jquery 添加一個新的 td 元素。 像這樣：

$('table').each((index,tr)=>{
    if(index === 0){
        tr.append("<td>B</td>");
    }
});

但是沒有鎖。 [Object object] 在我添加新 td 的地方以 DOM 呈現。 像這樣的東西：

請建議我在 tr 中動態添加新 td 的解決方案。 提前致謝。

Answer 1

你不需要一個循環。 您可以使用許多選擇器/方法來定位第一個tr的第一個td 。

鑒於您的問題中的 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');

我敢肯定還有其他方法，但這讓您對要采取的方法有所了解。

Answer 2

考慮以下示例。

 $(function() { function addCell(content, target) { if(content == undefined){ content = ""; } return $("<td>").html(content).appendTo(target); } addCell("B", $("table tbody tr:eq(0)")); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td>A</td> </tr> <tr> <td>D</td> </tr> </tbody> </table>

我懷疑您將有一個按鈕或其他機會來添加內容。 創建一個小的 function 可以讓這更容易一些。 這個 function 接受內容、單元格中的內容和目標。

最后一部分是提供一個目標。 這可以是 HTML 元素或 jQuery Object。 我提供了一個 jQuery Object 和 TABLE > TBODY > TR 的選擇器（等於索引 0）。

您也可以在循環中使用它：

$("tbody tr").each(function(i, el){
  if($("td:eq(0)", el).text() == "A"){
    var b = addCell("B", el);
    b.addClass("dynamic");
  }
});

Answer 3

我用純js試試這個
這是我的代碼

HTML：-

<table>
  <tbody>
      <tr id="myTr">
          <td>A</td>
      <tr>
      <tr>
          <td>D</td>
      <tr>
  <tbody>
<table>

Javascript：-

let myTr = document.getElementById("myTr");
let data = ['B','C'];

data.forEach(item => {
  let td = document.createElement("TD");
  td.innerHTML = item;
  myTr.appendChild(td);
});