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

Question

我 table 有几个 tr 元素，我想在我的 js 中为第一个 tr 元素动态添加一个新的 td。

Table 在添加 td 元素之前。

<table>
    <tbody>
        <tr>
            <td>A</td>
        <tr>
        <tr>
            <td>D</td>
        <tr>
    <tbody>
<table>

我想要一个这样的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

你不需要循环。您可以使用很多 selectors/methods 来定位第一个 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

我在纯 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);
});

Answer 3

考虑以下示例。

$(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）提供了一个带有选择器的 jQuery 对象。

你也可以循环使用它：

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

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

Add <td> elements into <tr> element dynamically using jquery and js

javascript

html

jquery

angularjs

jquery-ui