个人中心
gpt4 book ai didi

javascript - 如何根据表中的用户链接点击生成新的 HTML 页面？

转载 作者：行者123 更新时间：2023-11-28 14:10:16 26 4
gpt4 key购买 nike

请给我一个提示，我如何开始使用 anchor 点击中的 ID 显示用户个人资料。

我的主页网址是localhost/CRM/dashobard.html 。另外，我有完整的 JSON，其中我已经获取了所有潜在客户详细信息，并且我通过文件 dashboard.html 中的表格在列中显示其一些内容。

enter image description here

也在 dashboard.html文件我正在使用 PHP session ，如下所示。

<?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/

我有一张 table Lead Name在列值中。我想允许用户单击 Lead Name并且在新选项卡中向用户显示一个单独的页面，其中包含除表格中不存在的其他列之外的所有其他详细信息，这可以通过动态创建个人资料页面来完成，但因为我不知道哪个 Lead Name被访问用户点击。我想我缺乏URL转发的概念。

下面是前端截图。

enter image description here

enter image description here

enter image description here

我正在使用 AJAX 动态生成上表，并且表中有带有 anchor 标记的行 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');

最佳答案

要根据某些数据动态创建页面，您需要 PHP。假设您的页面是这样的:

show-profile.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>

关于javascript - 如何根据表中的用户链接点击生成新的 HTML 页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59819107/

26 4 0
文章推荐： javascript - 切换功能有效但 slideToggle 在 jQuery 中无效
文章推荐： ios - 是否可以暂停 CAEmitterLayer？
文章推荐： css - 带有嵌套 div 的整个可点击
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com