Using Ajax to send html value to Flask controller-CodePudding

I have a table

<table id="ex1" class="table table-striped table-hover table-sm" cellspacing="0" width="100%"></table>

that generates rows like the following:

<tr role="row" class="even tr-color-selected" style="color: rgb(0, 0, 0)">
  <td class="">last_name</td>
  <td>name</td>
  <td>phone</td>
  <td>email</td>
  <td class="sorting_1">2</td>
</tr>

if a row gets selected, the class changes from class="even" to class="even tr-color-selected", as seen above.

I'm trying to send the value from <td class="sorting_1">2</td> which is "2" in the above example, back to my flask-controller using an ajax post method (with the intention of deleteing that row from my database).

I tried using the following JS code. However it does not work, I keep getting an error (VM726 jquery.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'type') - see traceback below). I think the error might be happening where I am trying to integrate my variable id_to_be_deleted into the .ajax function.

// ----------- Table/editor construction -----------

// construct DataTable using data variable and column titles
$("#ex1").DataTable({
  data: data,
  columns: [
    { title: "last_name" },
    { title: "name" },
    { title: "phone" },
    { title: "email" },
    { title: "ID" },
  ],
  // make ID col invisiblae (-1 to access col from the right side)
  columnDefs: [{ visible: true, targets: -1 }],
});

// construct mdbEditor
$("#ex1").mdbEditor({
  modalEditor: true,
});
$(".dataTables_length").addClass("bs-select");

// ----------- Row deletion process -----------

// function called when row-delete-button submitted
function send_id_post() {
  // get ID from <tr> element
  const id_to_be_deleted = $("#ex1 .tr-color-selected").each(function () {
    var id_to_be_deleted = this.cells[5].innerHTML;
  });

  // send post request from js to flask, data = variable defined above
  $.ajax({
    type: "POST",
    url: "/zkl/del_pers_post",
    data: { id_to_be_deleted: id_to_be_deleted },
  });
}

Chrome error traceback:

edit:356 S.fn.init [tr.odd.tr-color-selected, prevObject: S.fn.init(1)]
VM726 jquery.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at v.handle (VM726 jquery.min.js:2)
    at i (VM726 jquery.min.js:2)
    at Dt (VM726 jquery.min.js:2)
    at Dt (VM726 jquery.min.js:2)
    at Dt (VM726 jquery.min.js:2)
    at Dt (VM726 jquery.min.js:2)
    at Dt (VM726 jquery.min.js:2)
    at Dt (VM726 jquery.min.js:2)
    at Dt (VM726 jquery.min.js:2)
    at Function.S.param (VM726 jquery.min.js:2)
v.handle @ VM726 jquery.min.js:2
i @ jquery.min.js:2
Dt @ jquery.min.js:2
Dt @ jquery.min.js:2
Dt @ jquery.min.js:2
Dt @ jquery.min.js:2
Dt @ jquery.min.js:2
Dt @ jquery.min.js:2
Dt @ jquery.min.js:2
S.param @ jquery.min.js:2
ajax @ jquery.min.js:2
send_id_post @ edit:358
onclick @ edit:269

I am new to programming for the web with javascript (only having python experience) so I am sorry if I am forgetting something important. Please advise.

CodePudding user response：

.each() doesn't return a value which is why you get undefined.
You can directly select the cell that has the value.

const id_to_be_deleted = $("#ex1 .tr-color-selected .sorting_1").html();