#javascript #php #html #mysql
#javascript #php #HTML #mysql
Вопрос:
Я пытаюсь сделать следующую таблицу в этом коде интерактивной. В основном, когда пользователь нажимает на него, элементы строки будут отправляться в PHP-файл, который содержит форму для внесения некоторых обновлений для пользователя, на которого нажали. Форма будет предварительно заполнена данными из предыдущей записи, на которую нажали в таблице, так что некоторые обновления должны быть сделаны для конкретного выбора пользователя.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table V04</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/perfect-scrollbar/perfect-scrollbar.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="centerThis">
<a class="thisButton" href="createUser.html" >Create New User</a>
</div>
<div class="limiter">
<div class="container-table100">
<div class="wrap-table100">
<div class="table100 ver1 m-b-110">
<div class="table100-head">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr class="row100 head">
<th class="cell100 column1">User Firstname</th>
<th class="cell100 column1">User Lastname</th>
<th class="cell100 column1">User Email</th>
<th class="cell100 column1">User Type</th>
</tr>
</thead>
</table>
</div>
<div class="table100-body js-pscroll ps ps--active-y">
<table>
<tbody>
<?php
include '../connection.php';
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql2 = "SELECT user_Firstname,user_Lastname,user_Email,user_Type FROM User ORDER BY user_Firstname ";
$resultForm2=mysqli_query($conn,$sql2);
while ($row = mysqli_fetch_array($resultForm2)) {
echo "<tr class='row100 body'>
<td class='cell100 column1'>" . $row[0] . "</td>
<td class='cell100 column2'>" . $row[1] . "</td>
<td class='cell100 column3'>" . $row[2] . "</td>
<td class='cell100 column4'>" . $row[3] . "</td>
</tr>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script>
$('.js-pscroll').each(function(){
var ps = new PerfectScrollbar(this);
$(window).on('resize', function(){
ps.update();
})
});
</script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>
Комментарии:
1. Я не вижу никаких попыток добавить какое-либо событие щелчка или отправить что-либо на PHP. Пожалуйста, поделитесь тем, что вы пытались решить до сих пор.
2. вы можете создать ссылку на строку таблицы —
3.
<table> <tr> <a href="#"><td> iam a link</td> </a> <td>iam not a link</td> </tr> </table>4. @MagnusEriksson я полагаю, мне нужно создать форму внутри <tr>, чтобы я мог отправлять входные данные через post. Но я понимаю из вашего комментария, что мне нужно написать функцию javascript, чтобы перехватить событие click. В настоящее время я пытаюсь
5. Вам нужно задать конкретный вопрос о Javascript, который вы пытаетесь написать.
Ответ №1:
Вы можете использовать HTML-форму: https://www.w3schools.com/php/php_forms.asp
Вам нужно будет изменить часть существующего HTML-кода, и я бы посоветовал создать отдельный PHP-файл для обработки формы POST.
Или вы можете попробовать сделать это с помощью javascript, но я бы рекомендовал сначала сделать это с помощью и HTML form, чтобы понять основы управления формами, прежде чем выполнять какие-либо javascript.
Ответ №2:
Если вы хотите перенаправить страницу при нажатии на строку таблицы, это вам поможет.
$(document).ready(function () {
$('body').on('click', '.table tbody tr', function () {
window.location.href = 'redirect-link-here';
});
});