如何根據用戶在表格中的鏈接點擊生成新的 HTML 頁面？
[英]How to generate the new HTML Page based on user link click in table?
問題描述
給我一個提示，我如何開始在錨點點擊中使用 id 顯示用戶個人資料。
我的主頁 URL 是localhost/CRM/dashobard.html 。 此外，我有完整的 JSON，其中我已經獲取了所有潛在客戶的詳細信息，並且我正在通過文件dashboard.html的表格在列中顯示其一些內容
同樣在dashboard.html文件中，我使用PHP 會話如下。
<?php
session_start();
if($_SESSION['State'] == 'Authenticated'){
$user_id = $_SESSION['User_Id'];
if(function_exists('date_default_timezone_set'))
{
date_default_timezone_set("Asia/Kolkata");
}
$today = date("Y-m-d H:i:s");
?>
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dashboard</title>
</head>
<body>
all header and sections tag content are there
</body>
</html>
<?php
}else{
echo "<script>location.href='https://localhost/CRM/login.html';</script>";
}
?>
我想在localhost/CRM/dashboard.html/17/John-doe或localhost/CRM/dashboard.html/lead/17/顯示用戶配置文件
我有列值中包含Lead Name表格。 我想允許用戶單擊Lead Name ，並向用戶顯示一個單獨的頁面，其中包含除表中不存在的其他列之外的所有其他詳細信息，在新選項卡中，這可以通過動態制作個人資料頁面來完成，但是因為我不知道訪問用戶點擊了哪個Lead Name 。 我想我缺乏 URL 轉發的概念。
下面是前端的截圖。
我正在使用 AJAX 動態生成上表，並且該表具有帶有錨標記Lead Name ，用戶可以在其中單擊並訪問個人資料頁面。 但我認為這需要動態生成 HTML 頁面，但我不知道該怎么做。
例如，在下面的代碼文件loadtable.js 。
$(document).ready(function() {
var delay = 1000;
// Campaign Submit Info
$('[name="search_submit"]').click(function(e) {
e.preventDefault();
var lead_status = $('#filterformpost').find('#lead_status_select option:selected').val();
var campaign_status = $('#filterformpost').find('#campaign_status_select option:selected').val();
var company_name = $('#filterformpost').find('#company_name_select option:selected').val();
var tech_area = $('#filterformpost').find('#tech_area_select option:selected').val();
var firm_size = $('#filterformpost').find('#firm_size_select option:selected').val();
var firm_type = $('#filterformpost').find('#firm_type_select option:selected').val();
var country_name = $('#filterformpost').find('#country_name_select option:selected').val();
var state_name = $('#filterformpost').find('#state_name_select option:selected').val();
var start_date = $('#filterformpost').find('#start_date_search').val();
var end_date = $('#filterformpost').find('#end_date_search').val();
$.ajax({
type: "POST",
url: "./server/search.php",
data: {
"lead_status": lead_status,
"campaign_status": campaign_status,
"company_name": company_name,
"tech_area": tech_area,
"firm_size": firm_size,
"firm_type": firm_type,
"country_name": country_name,
"state_name": state_name,
"start_date": start_date,
"end_date": end_date
},
beforeSend: function() {
$('.message_box').html(
'<img src="tenor.gif" width="40" height="40"/>'
);
},
success:function(data){
var result = $.parseJSON(data);
console.log(result);
$("#filterRecords").empty();
var table='';
table = $("<table></table>");
table.append('<thead><th>#</th><th>Lead Name</th><th>Company</th><th>Email</th><th>Phone</th><th>Lead Owner</th><th>Details</th></thead>');
table.append('<tbody></tbody>');
var i = 1;
$.each(result, function(key, value) {
table.last().append("<tr><td>" + i + "</td><td><a target='_blank' class='lead-name' href="+value['Lead_Id']+">" + value['FirstName'] + ' ' + value['LastName'] + "</a></td><td>" + value['Company'] + "</td><td><a href=mailto:" + value['Email'] + ">" + value['Email'] + "</a></td><td>" + value['Phone'] + "</td><td><a target='_blank' class='lead-owner' href=" + value['LeadAddedBy'] +">" + value['LeadAddedBy'] + "</td><td>" + "<form action='' method='POST'><button id=" + value['Lead_Id'] + " name=''>View</button></form>"+"</td></tr>");
i = i + 1;
});
$("#filterRecords").html(table);
$('.message_box').html('');
}
});
});
});
在運行 SQL 查詢並返回 JSON 對象的 PHP 文件中。
<?php
// send a JSON encoded array to client
include('connection.php');
$selectSQL = "SELECT * FROM tbl_main_lead_info ";
$result_array = array();
$result = $conn -> query ($selectSQL);
// If there are results from database push to result array
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_array($result)) {
array_push($result_array, $row);
}
}
echo json_encode($result_array);
$conn->close();
?>
在顯示表格的文件中dashboard.html
<!-- Filter section with Main Lead Table -->
<section class="operation" id="view_lead_info" style="display: block;">
<div class="row">
<div class="col">
<div style="overflow-x:auto;">
<div id="filterRecords"></div>
</div>
</div>
</div>
</section>
用於顯示配置文件的表的 SQL。
--
-- Table structure for table `tbl_main_lead_info`
--
DROP TABLE IF EXISTS `tbl_main_lead_info`;
CREATE TABLE IF NOT EXISTS `tbl_main_lead_info` (
`Lead_Id` int(100) NOT NULL AUTO_INCREMENT,
`FirstName` varchar(100) DEFAULT NULL,
`LastName` varchar(100) DEFAULT NULL,
`Company` varchar(100) DEFAULT 'NA',
`Website` varchar(100) DEFAULT 'NA',
`Designation` varchar(100) DEFAULT 'NA',
`Linkedin` varchar(100) DEFAULT 'NA',
`Email` varchar(100) DEFAULT NULL,
`Phone` varchar(100) DEFAULT NULL,
`State` varchar(100) DEFAULT NULL,
`Country` varchar(100) DEFAULT NULL,
`TechArea` varchar(100) DEFAULT NULL,
`FirmType` varchar(100) DEFAULT NULL,
`FirmSize` varchar(100) DEFAULT NULL,
`LastContactDate` date DEFAULT NULL,
`NextContactDate` date DEFAULT NULL,
`LeadDescription` varchar(200) DEFAULT NULL,
`OwnerNotes` varchar(200) DEFAULT NULL,
`SetReminder` date DEFAULT NULL,
`AdminNotes` varchar(200) DEFAULT NULL,
`LeadStatus` varchar(100) DEFAULT NULL,
`LeadAddedBy` int(100) NOT NULL,
`LeadAddedOn` datetime DEFAULT NULL,
PRIMARY KEY (`Lead_Id`),
UNIQUE KEY `FirstName` (`FirstName`,`LastName`,`Company`,`Website`,`Designation`,`Linkedin`,`Email`,`Phone`)
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_main_lead_info`
--
INSERT INTO `tbl_main_lead_info` (`Lead_Id`, `FirstName`, `LastName`, `Company`, `Website`, `Designation`, `Linkedin`, `Email`, `Phone`, `State`, `Country`, `TechArea`, `FirmType`, `FirmSize`, `LastContactDate`, `NextContactDate`, `LeadDescription`, `OwnerNotes`, `SetReminder`, `AdminNotes`, `LeadStatus`, `LeadAddedBy`, `LeadAddedOn`) VALUES
(18, 'Tohn', 'Doe', 'Microsoft', 'www.microsoft.com', 'Manager', 'Tohn Doe', 'tohndoe@microsoft.com', '5125501556', 'California', 'USA', 'Wireless technologies', 'Corporate', '1000+', '2020-01-27', '2020-01-31', 'This is a testing description', NULL, '2020-02-27', 'This is Admin Notes Testing', 'Active', 18, '2020-01-15 10:50:36'),
(17, 'John', 'Doe', 'Google', 'www.google.com', 'Manager', 'John Doe', 'johndoe@google.com', '5125501555', 'Texas', 'USA', 'Intellectual Property', 'Corporate', '11-50', '2020-01-14', '2020-01-25', 'This is a Testing Description', 'This is My Notes Belongs to Rinku 16', '2020-01-17', NULL, 'Active', 22, '2020-01-14 17:04:02');
3 個解決方案
解決方案1
2 已采納 2020-01-20 08:52:29
要從某些數據動態創建頁面，您需要 PHP。 假設您的頁面是這樣的：
顯示配置文件.php
$lead_id = $_GET[ 'lead_id' ]; // Get the lead_id value, of course you'd need to check if it has been set, is valid, etc.
... here your code to retrieve info through the $lead_id value ...
在您的表格中放置一個這樣的鏈接就足夠了：
"<a target='_blank' href='show-profile.php/?lead_id=" + value['Lead_Id'] + "'>Show Details</a>"
編輯
這是 show-profile.php 頁面的更詳細示例：
<?php
if ( ! isset( $_GET[ 'lead_id' ] ) {
echo( 'No parameter lead_id given' );
exit;
}
$lead_id = $_GET[ 'lead_id' ];
$data = get_details( $lead_id );
# Here you can check about the $data returned, which depends by your get_details function, to check if the details has been found or not and act consequently. Here we suppose you got the right data to make it short.
?>
<!-- HTML page definition, HTML, HEAD, LINKS, etc. goes here -->
<body>
<div id="details">
<p class="first-name">First Name: <?php echo $data[ 'first_name' ] ?></p>
<p class="last-name">Last Name: <?php echo $data[ 'last_name' ] ?></p>
<!-- other data to show here -->
</div>
</body>
當然，在代碼中，get_details 是您通過 $lead_id 值檢索數據的函數。
編輯 2：JSON 數據已經得到
假設您要顯示的數據存在於 JSON 對象中：
data = {
lead_id: 20,
first_name: 'John',
last_name: 'Doe',
}
您打開詳細信息頁面的鏈接將如下所示：
"<a target='_blank' href='show-profile.php/?lead_id=" + data.lead_id + "&first_name=" + data.first_name + "&last_name=" + data.last_name + "'>Show Details</a>"
你的 show-profile.php 頁面看起來像這樣：
<?php
# Check if all the data you need has been given
... your code ..
# Retrieve the data and store them into variables
$lead_id = $_GET[ 'lead_id' ];
$first_name = $_GET[ 'first_name' ];
$last_name = $_GET[ 'last_name' ];
?>
<html>
<head></head>
<body>
<p class="first-name">First Name: <?php echo $first_name; ?></p>
<p class="last-name">Last Name: <?php echo $last_name; ?></p>
<!-- other data to show here -->
</body>
</html>
解決方案2
1 2020-01-20 08:22:14
您首先需要有一個配置文件頁面，您可以在其中加載特定配置文件的詳細信息。
您需要將記錄的id作為查詢字符串傳遞給您的 URL，例如： www.your-domain.com/?profileId=xxx
在配置文件頁面中，您需要檢索profileId並發出 get 請求以從您的數據存儲中獲取特定的配置文件記錄並動態填充您的標簽。
解決方案3
1 2020-01-20 08:41:39
• 第一個選項是使 div 看起來像一個窗口。 如果您已經獲取了所有數據，則通過單擊的元素索引在數組中找到相應的數據並將它們放入新模板中，以便您可以顯示它們。
• 否則，根據 -a- 標簽中生成的 URL，應該類似於example.com?client=2 ，您必須進行查詢，獲取客戶端詳細信息，然后在前端或后端制作模板其中。
如何在表格行中生成動態按鈕並在單擊按鈕時打開新頁面
[英]How to generate Dynamic button in a table row and open new page on button click
如何讓用戶單擊HTML5視頻的屏幕並轉到新窗口中的鏈接？
[英]How can I have the user click on the screen of my HTML5 video and be taken to a link in a new window?
運行 javascript 的鏈接打開另一個頁面。 如果用戶使用中鍵單擊或右鍵單擊菜單，如何在新選項卡中執行此操作
[英]link running a javascript that open another page. how to make it do it in new tab if user uses middle click or right click menu
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.