使用 jQuery 更改特定 TD 的值

Question

我真的很想得到你的帮助。无法在过去的帖子中找到解决方案。

我正在尝试更改特定行中特定 td 的文本。

所以我得到了这段代码，我找到了特定的行：

$('#courses-table tr').each(function () {
    if (this.children[6].innerText == newAssignment[3]) { // check courses
        if (this.children[5].textContent == newAssignment[5].split(' ').slice(1).join(' ')) { // check route

            if (this.children[4].textContent == newAssignment[4].split(' ').slice(1).join(' ')) { // check semester

                console.log(this.getElementsByTagName('td')[3].textContent)
                this.getElementsByTagName('td')[0].innerHTML = "TEST";
            }
        }
    }
})

现在，在找到包含特定数据的行之后，我想将位置 5 中的 td 更改为其他内容。

但是 .innerHTML 不适合我。

你们有什么建议吗？

Answer 1

//assign these outside the cycle for better performance
var route = newAssignment[5].split(' ').slice(1).join(' ');
var semester = newAssignment[4].split(' ').slice(1).join(' ');


$('#courses-table tr').each(function (index,element) {
    var rowElement = $(element);     
    var rowChildren = rowElement.children(); //arent those all td ?



    if( rowChildren.eq(6).text() == newAssignment[3] && 
        rowChildren.eq(5).text() == route && 
        rowChildren.eq(4).text() == semester){

        var rowTDs = rowElement.find('td');// isnt this same to row children ?? 
        console.log( rowTDs .eq(3).text() );
        rowTDs .eq(0).html("TEST" );
    }

});

Answer 2

考虑以下因素。

$(function() {
  var newAssignment = [
    "Col 0",
    "Col 1",
    "Col 2",
    "Mark",
    "C Col4",
    "B Col5",
    "Col 6"
  ];
  
  newAssignment[4] = newAssignment[4].split(' ').slice(1).join(' ');
  newAssignment[5] = newAssignment[5].split(' ').slice(1).join(' ');
  
  $('#courses-table tr').each(function(i, row) {
    if ($("td:eq(6)", row).text() == newAssignment[3]) { // check courses
      console.log("First Hit");
      if ($("td:eq(5)", row).text() == newAssignment[5]) { // check route
        console.log("Second Hit");
        if ($("td:eq(4)", row).text() == newAssignment[4]) { // check semester
          console.log("Third Hit");
          console.log($("td:eq(3)", row).text());
          $("td:eq(0)", row).html("TEST");
        }
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="courses-table" width="100%">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col4</td>
      <td>Col5</td>
      <td>Col 6</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col4</td>
      <td>Col5</td>
      <td>Mark</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col4</td>
      <td>Col5</td>
      <td>Col 6</td>
    </tr>
  </tbody>
</table>

这会将它全部变成 jQuery 而不是混合。我在 .each() 回调中使用 i 和 row 作为索引和元素。现在我们可以根据需要 select Cells 并执行测试。

Answer 3

查找例子中注释对应的数字：

➊ 双 ?? 是 nullish coalescing operator。如果 document.querySelector(selector) 是 null 因为找不到第一个 @param 它将默认为 document.querySelector('table')
➋ 链式 ternary operators 基本上是 if/if else/else 条件。这个特定的链确保如果选择器指向 <table>，它会被重定向到 <tbody>。我们将使用 .rows 属性，如果引用 <table>，则 .rows 的长度将包括 <thead> 和 <tfoot>（如果存在）。
➌ 如果最后一个@param 作为true 传递，则.replaceChildren() 将用于删除目标单元格的所有内容。
➍ 最后我们将 HTML/text 附加到目标单元格。
- .rows 属性按索引
- .cells 属性按索引
- .insertAdjacentHTML() 插入 HTML and/or 文本

// The numbers are index 0 so if you want to target the 6th row it's index 5
tGrp.rows[5].cells[3].insertAdjacentHTML('beforeend', content)

/**
 * @desc locate a table cell (<td>/<th>) of a <thead>, <tbody>, or <tfoot> by 2 given 
 *       indices and insert or replace it's content with text and/or HTML.
 * @param {string<CSS selector>} selector - Reference to the <table> or it's children       
 * @param {number} row - Index of the <tr> of target cell
 * @param {number} col - Index of the target <td>/<th> 
 * @param {string<htmlString>} content - A string of HTML and/or text
 * @param {boolean} overwrite - If false, content is appended. If true, cell content will
 *        replaced with content
 * @default {boolean} overwrite - false
 */
function rowCol(selector, row, col, content, overwrite = false) {
  let table = document.querySelector(selector) ?? document.querySelector('table'); //➊
  let tGrp =
    table.tagName === 'TBODY' ? table :
    table.tagName === 'TABLE' ? table.tBodies[0] :
    table.tagName === 'THEAD' ? table :
    table.tagName === 'TFOOT' ? table : table.tBodies[0]; //➋
  if (overwrite) {
    tGrp.rows[row].cells[col].replaceChildren(); //➌
  }
  tGrp.rows[row].cells[col].insertAdjacentHTML('beforeend', content); //➍
}


rowCol('table', 7, 3, ` <input placeholder="Enter text">`);
rowCol('tbody', 2, 0, `This is an overwrite`, true);
rowCol('.test', 9, 5, `<br>Last row and column`);
rowCol('thead', 0, 4, `Fifth column`, true);
rowCol('table', 6, 3, `<a href='example.com'>Example.com</a>`, true);
rowCol('t', 5, 1, `If the first parameter is wrong, it's OK as long as it's a string`, true);

td {
  border: 1px solid black;
}

<table class='test'>
  <thead> 
    <tr><th>TEST</th><th>TEST</th><th>TEST</th><th>TEST</th><th>TEST</th><th>TEST</th></tr>
  </thead>
  <tbody>
    <tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr>
    <tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr>
    <tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr>
    <tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr>
    <tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr>
    <tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr>
    <tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr>
    <tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr>
    <tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr>
    <tr><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td><td>TEST</td></tr>
  </tbody>
</table>

使用 jQuery 更改特定 TD 的值

Changing value of a specific TD using jQuery

javascript

jquery

html-table