Changing value of a specific TD using jQuery-CodePudding

I would really like your help. Couldn't find the solution on past posts.

I am trying to change the text of a specific td in a specific row.

So I got this code which I find the specific row:

$('#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";
            }
        }
    }
})

Now, after i find the row with the specific data, i want to change for example the td in position 5 to be something else.

But .innerHTML don't work for me.

Do you guys have any suggestions for me?

CodePudding user response：

Consider the following.

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

This turns it all into jQuery instead of a mix. I used i and row for Index and Element in the .each() callback. Now we can select the Cells as needed and perform the tests.

CodePudding user response：

Look for the corresponding number commented in the example:

➊ The double ?? is a nullish coalescing operator. If document.querySelector(selector) is null because it couldn't find the first @param it will default to document.querySelector('table')
➋ The chained ternary operators are basically if/if else/else conditionals. This particular chain insures that if the selector points to <table> it gets redirected to <tbody>. We will be using .rows property and if <table> is referenced then the length of .rows will include <thead> and <tfoot> if they exist.
➌ If the last @param is passed as true then .replaceChildren() will be used to remove all content of target cell.
➍ Finally we'll append the HTML/text to the target cell.
- .rows property to target the <tr> by index
- .cells property to target the <td>/<th> by index
- .insertAdjacentHTML() to insert HTML and/or text

// 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>

CodePudding user response：

//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" );
    }

});