使用 jquery 和 js 将 <td> 元素动态添加到 <tr> 元素中

Posted 2023-05-08

【中文标题】使用 jquery 和 js 将 <td> 元素动态添加到 <tr> 元素中

【英文标题】：Add <td> elements into <tr> element dynamically using jquery and js

【发布时间】：2021-08-10 17:03:15

【问题描述】：

我有几个 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 的解决方案。提前致谢。

【参考方案1】：

考虑以下示例。

$(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>

我怀疑您将有一个按钮或其他机会来添加内容。创建一个小函数可以让这更容易一些。此函数接受内容、单元格中所需的内容和目标。

最后一部分是提供一个目标。这可以是 HTML 元素或 jQuery 对象。我为 TABLE > TBODY > TR（等于索引 0）提供了一个带有 Selector 的 jQuery 对象。

你也可以循环使用：

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

【参考方案2】：

您不需要循环。您可以使用许多选择器/方法来定位第一个 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');

我敢肯定还有其他方法，但这会让您了解要采取的方法。

【讨论】：

Rory McCrossan，我喜欢你的方法。但是有没有办法循环并添加 td 的？因为我有各种用户案例，我需要在插入 td 之前检查几个值。

绝对是的。我建议您对此提出一个新问题，因为您在这里提出的问题与该问题无关

【参考方案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);
);