How to change specific jQuery dataTables cell value

Question

I have 2 HTML tables. Table 1 , and Summary Table 2 .

I use the following function to add or remove a checkmark in a cell in Table 1 , and to then increment or decrement the relevant value in Summary Table 2 .

function toggleCheckMark(elem, brand){

  var cell = $(elem).html();
  if(cell == ""){

    $(elem).html("&#x2714");

    var brandval = parseInt($("#" + brand).find("td:eq(3)").html());
    var newval = brandval + 1;
    $("#" + brand).find("td:eq(3)").html("" + newval + "");


  } else {

    $(elem).html("");

    var brandval = parseInt($("#" + brand).find("td:eq(3)").html());
    var newval = brandval - 1;
    $("#" + brand).find("td:eq(3)").html("" + newval + "");

  }

}

This works absolutely fine when Summary Table 2 is a bog standard html table. However when I used DataTables() on Summary Table 2 . The value is undefined, and therefor cannot be changed.

How can I change my function so that it will work when my table is formatted by DataTables() ?

EDIT

My HTML already includes empty <table id="rangereviewsummarytable"> tags and I use the following function to populate the summary table.

Here's a clickable cell:

rrtable += "<td class='checkboxcell' onClick=\"toggleCheckMark(this, '" + item.brand + "')\">&#x2714</td>";

And the function

function generateReviewSummary(summaryarray){

  var summarytable = "";

  $.each(summaryarray, function(brand, values){

    summarytable += "<tr id='" + brand +"''>"; //here is the logic behind $("#" + brand)...
    summarytable += "<td>" + brand + "</td>";
    summarytable += "<td>" + values.current + "</td>";
    summarytable += "<td>" + values.rec + "</td>";
    summarytable += "<td>" + values.user + "</td>"; // this is the col I want to update
    summarytable += "</tr>";

  });

  summarytable = "<tbody>" + summarytable + "</tbody>";

  $("#rangereviewsummarytable").append(summarytable);
  //$("#rangereviewsummarytable").DataTable();
  $("#rangereviewsummarypanel").show();

}

Answer 1

Always use the API. You seem to want to update a specific column in a specific row - use the .cell().data() API method instead of jQuery .html()

var brandval = parseInt(summaryTable.cell({ row: 0, column: 2 }).data())
brandVal = !isNaN(brandVal) ? brandVal+1 : 1 //or -1
summaryTable.cell({ row: 0, column: 2 }).data(brandVal).draw() 

I am referring to a summaryTable , the dataTable instance you must have since you have instantiated "Summary Table 2" somewhere :

var summaryTable = $("#" + brand).DataTable()

What the logic is behind $("#" + brand) I can only guess.