Блог

Это моя выбранная строка из моего html теперь как я могу выбрать эту строку, и когда я нажму «Просмотреть сведения», она будет передана как выбранная/выделенная строка ?

Нужна была экспертная помощь в этом вопросе

Это мой код, над которым я работаю

 lt;div class="col-md-10"gt;   lt;div class="table-responsive"gt;  lt;table id="customer-list" class="table"gt;  lt;!-- Loading Spinner Div --gt;  lt;div id="loading-container"gt;  lt;pgt;Fetching all customer data...lt;/pgt;  lt;div id="loading-spinner"gt;    lt;/divgt;  lt;/divgt;  lt;tbodygt;    lt;/tbodygt;  lt;/tablegt;  lt;/divgt;    lt;!--AJAX call database--gt;  lt;scriptgt;       $.ajax({   url: "https://ecoexchange.dscloud.me:8080/api/get",   method: "GET",  // In this case, we are going to use headers as  headers: {  // The query you're planning to call  // i.e. lt;querygt; can be UserGet(0), RecyclableGet(0), etc.  query: "CustomerGet(0)",   // Gets the apikey from the sessionStorage  apikey: sessionStorage.getItem("apikey")  },     success: function (data, xhr, textStatus) {  console.log(data)      const buildTable = data =gt; {  const table = document.querySelector("#customer-list tbody");     for (let i = 0; i lt; data.length; i  ) {  let row =     `    lt;trgt;  lt;td class="cell-customer-name"gt;lt;img src = "${data[i].Picture}" class="picture" gt;lt;/imggt;lt;/tdgt;  lt;td class="cell-customer-name" style="padding-right: 380px; padding-top: 40px; font-weight: bold; font-size: 20px;"gt;${data[i].Name}lt;/tdgt;  lt;/trgt;`;    table.insertAdjacentHTML('beforeEnd', row);    }  };   // Fetch method  const getData = async (url) =gt; {   const response = await fetch(url, {  method: 'GET',  headers: {  query: "CustomerGet(0)",  // Gets the apikey from the sessionStorage  apikey: sessionStorage.getItem("apikey")  }  });  const json = await response.json();  $("#loading-container").hide();  return buildTable(json);  };  getData('https://ecoexchange.dscloud.me:8080/api/get')       },   error: function (xhr, textStatus, err) {  console.log(err);  }  });  lt;/scriptgt;  

это мой основной стиль css

 lt;stylegt;  /*Button style */  .custom {  width: 120px  }   .highlight {  background-color: rgba(0, 0, 0, 0.15);     }   .table tbody tr{  border-bottom-color: lightgray;  border-bottom: solid LightGray ;  border-top: solid LightGray ;    }   .table-responsive{  padding-top: 50px;    }  .picture{  width: 100px;  height: 100px;  border-radius: 50%;  }      lt;/stylegt;  

наедине с выделенной строкой моей таблицы

 $(document).ready(function() {  const btns = $('.change-row');  $("tbody").on('click', 'tr', function(e) {  //Add this line if you want only a single row selected   $('tbody tr').not($(this)).removeClass('highlight');    $(this).toggleClass('highlight');   if ($('tbody tr').hasClass('highlight')) {  btns.prop('disabled', false).removeClass('disabled dark');  } else {  btns.prop('disabled', true).addClass('disabled dark');  }   }); });  

Итак, теперь я хочу перейти к просмотру подробностей, где, если я нажму на нее, я перейду на новую страницу, содержащую мои предыдущие данные выбранной строки . Страница сведений о представлениях пока является пустой страницей, так как я пока не знаю, как передать данные на новую страницу