Search code examples
javascripthtmljqueryhtml-tabledatatable

Jquery Ajax - How to display data table when select three rows of three tables

I have loaded data into a table with each table being a different SQL database. Now I want to click on each table 1 row. After clicking on 3 rows of 3 tables will display the data of another data table.
My form table with 3 other html table(1 normal and 2 check box table) :
enter image description here

My data table i want load it form SQL.
enter image description here

All three tables Form 1 Form2 Form 3 have a VoyageKey field, based on that to load the other data table

I have tried assigning click event for each select to 1 row and for the 3rd time it will call ajax to load the data table with no success.

When I select 3 tables. It will load another datatable similar to this, and they are not from the same database but as separate tables.enter image description here enter image description here

based on VoyageKey of Form 1 to display datatable after selecting rows of 3 tables enter image description here

enter image description here

I want after 3 click events to display the datatable, but the data displayed depends on the SQL VoyageKey field My code Ajax load datatable :

  $('body').on('click', 'tr', function () {
  var vesselName = $(this).find('td:eq(0)').text();
  var groupvoyage = $(this).find('td:eq(2)').text();

  console.log('vesselName:', vesselName);
  console.log('voyagekey:', voyagekey);
  // Gán giá trị cho trường input
  $('#chooseVessel').val(vesselName);
  $('#chooseVoyage').val(groupvoyage);

  let me = $(this);
  // select me
  me.toggleClass('selected');
  // deselect other tr:s in the same table
  me.parent().find('.selected').not(me).removeClass('selected');
  // if three rows are selected, then do something
  // (there can only be one row in each table that is selected)
  if ($('.selected').length === 3) {

// Gọi ajax để load dữ liệu dựa trên voyagekey
$.ajax({
  type: "POST",
  url: '/Tally/Tally/get',
  data: { voyagekey: voyagekey },
success: function(result) {
 // Xử lý dữ liệu nhận được và hiển thị lên bảng ContentTable
      table.clear().draw();
      table.clear().rows.add(result.data).draw();


},
error: function(xhr, status, error) {
console.log(xhr.responseText);
}
});
        }
      });

But Form 2 and Form 3 in my table is checkbox. How to adjust. Also when loading ajax I want to rely on the VoyageKey field coincides with Form 1 to load correctly.

When I click on the data table it is hidden. How to edit and manipulate the board

Help me!

Solution

  • I would do it like this, make sure only one row can be selected at once in each table (I'm using the class name selected for the selected row.)

    That means when we have three elements with the class selected they must be in different tables, so then do something.

    Also see the comments in the code.

    // create dummy tables
function createDummyTables() {
  $('body').html([
    ['red', 'green', 'blue'],
    ['rabbit', 'dog', 'cat'],
    ['house', 'apartment', 'tent']
  ].map(x => '<table>' + x.map(x =>
    `<tr><td>${x}</td></tr>`).join('') + '</table>').join(''));
}
createDummyTables();

$('body').on('click', 'tr', function () {
  let me = $(this);
  // select me
  me.toggleClass('selected');
  // deselect other tr:s in the same  table
  me.parent().find('.selected').not(me).removeClass('selected');
  // if three rows are selected, then do something
  // (there can only be one row in each table that is selected)
  if ($('.selected').length === 3) {
    let [color, pet, housing] =
      [...$('.selected')].map(x => x.innerText);
    let message = `Going to fetch a ${color} ${pet} `
      + `that can live in your ${housing} with you!`;
    alert(message);
    // maybe deselect all after we have done something
    $('.selected').removeClass('selected');
  }
});
    table {
  width: 80%;
  border: 1px solid #000;
  margin: 10px;
  border-collapse: collapse;
}

tr {
  cursor: pointer;
  border: 0;
  background-color: #eee;
}

tr:nth-child(even) {
  background-color: #ddd;
}

tr:hover {
  background-color: #a8bfe1;
}

tr.selected {
  background-color: #7f97ba;
}

td {
  font-family: Verdana;
  padding: 5px 10px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three tables</title>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script>
</body>

</html>