Сделать целую строку clickable

Question

Я пытаюсь сделать целую строку таблицы доступной. Я посмотрел на кучу учебников, и все они кажутся довольно простыми, но я не могу заставить его работать. Я пробовал DoNav, и это не сработало, простой атрибут onclick не работает, что я делаю неправильно? Я использую mysql, php и html. Спасибо за помощь!

echo '<table>'; 
     echo '<tr>'; 
      echo '<th>Name</th><th>Checked In?</th><th>ID</th>'; 
     echo '</tr>'; 
     while($row = $CheckedIn->fetch_assoc()){ 

      echo '<tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this,false);" onclick="document.location="www.engineering.us/gena/details.php";">'; 
      echo '<td align="left">'; 

      echo $row['ChildName']; 

      echo '</td>'; 
      echo '<td align="center">'; 
     ; 
      echo $row['checkedin']; 

      echo '</td>'; 
      echo '<td align="center">'; 

      echo $row['P_Id']; 

      echo '</td>'; 
      echo '</tr>'; 

    } 
    echo '</table>'; 

Answer 1

Подборка с того, что georoot сказал, используйте PHP в своем HTML. Это делает разметку более читаемой и обычно позволяет вашей программе добавлять подсветку синтаксиса, что упрощает ее чтение. Я добавил два дополнительных класса («js-table» и «table-tr»), которые я объясню немного. Другим важным моментом является то, что URL-адрес находится в новом атрибуте в строке таблицы: data-url.

<table class="js-table"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Checked In?</th> 
      <th>ID</th> 
     </tr> 
    </thead> 
    <tbody> 
     <?php while ($row = $CheckedIn->fetch_assoc()): ?> 
     <tr class="table-tr" data-url="http://www.engineering.us/gena/details.php"> 
      <td><?php echo $row['ChildName']; ?></td> 
      <td><?php echo $row['checkedin']; ?></td> 
      <td><?php echo $row['P_Id']; ?></td> 
     </tr> 
     <?php endwhile; ?> 
    </tbody> 
</table> 

«table-tr» класс позволяет нам предназначаться строки таблицы в CSS. Нет необходимости использовать JavaScript для чего-то такого простого. Даже изменение цвета текста внутри ячейки таблицы очень просто в CSS. У этого метода есть другое преимущество, что его можно легко изменить без необходимости изменять любой HTML, PHP или JavaScript - это чисто стилистическая вещь.

.table-tr:hover { 
    background-color: red; 
} 

Наконец, так как вы используете JQuery, мы можем воспользоваться этим новым классом «js-table». Префикс «js-» гласит, что класс используется для привязки функциональности и не должен быть стилизован. Этот скрипт просто привязывает событие клика к таблице, которая прослушивает пользователя, нажимая на строку таблицы с атрибутом data-url. Когда это происходит, страница перенаправляется (используя window.location вместо document.location - она ​​может работать в любом случае, но я всегда использовал window.location) по этому URL-адресу. Это позволяет вам изменить URL-адрес позже или изменить его на строку без изменения какого-либо вашего JavaScript.

$(function() { 

    $(".js-table").on("click", "tr[data-url]", function() { 
     window.location = $(this).data("url"); 
    }); 

}); 

Я надеюсь, что это поможет.

Answer 2

onclick="document.location="www.engineering.us/gena/details.php";" 

это должно быть

onclick="document.location='www.engineering.us/gena/details.php';" 

Также еще один совет, у вас есть больше, чем HTML PHP, так что лучше использовать несколько тегов PHP, а не эхо называемые много раз. Таким образом было бы легче найти такие ошибки.

Редактировать Вы должны также избежать апостроф в случае, если вы все еще идут с PHP

Answer 3

Я думаю, вы должны попытаться сделать это с помощью JQuery.

HTML

<tr class="table-tr"></tr> 

JQuery

$('.table-tr').on('click', function(){ 
    window.location = "your url here"; 
}); 

Answer 4

Рассмотрим, используя следующий код:

$("#Table tr").click(function() { 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    var value = $(this).find('td:first').html(); 
    window.location.href = "url"; 
}); 

Где таблица является ваше имя таблицы и URL является адрес, который вы хотите, чтобы перейти к

Answer 5

Пожалуйста, измените свой код с этим

<tr onclick="window.location.href=www.engineering.us/gena/details.php">