将SQL结果返回到可点击表

时间：2017-08-08 14:35:03

标签： javascript php jquery

我正在开展一个小项目。它是一个联系人数据库，用户可以在其中添加和搜索联系人。到目前为止，您可以添加联系人，并在页面加载表填充结果。大。 但我想知道是否可以使每一行都可以点击，以便在单击该行时，使用javascript将数据填充到表单中。 我正在看的一个想法是当使用select语句拉取搜索结果时，也会选择id字段并将其置于隐藏的th中。然后，当单击链接时，表单使用get方法选择id =已选择的数据。这会有用吗？还是有另一种方式？ 为简洁起见，我没有使用处理某些错误的include文件。 

<!doctype html>
<html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="displayContacts">
<?php

//**********************************************
//*
//*  Connect to MySQL and Database
//*
//**********************************************

$db = mysqli_connect('localhost','root','', 'test');

if (!$db)
{
	print "<h1>Unable to Connect to MySQL</h1>";
}


include "0811_common_functions_mysqli.php";
$outputDisplay = "";
$myrowcount = 0;


//**********************************************
//*
//*  SELECT from table and display Results
//*
//**********************************************
$sql_statement  = "SELECT firstname, lastname, pcat, contact_id ";
//, congroup, cattype, company, position, email, website, phone, mphone, wphone, fax, add1, add2, city, state, zip, country, reference, entrydate, enteredby, notes ";
$sql_statement .= "FROM contacts ";
$sql_statement .= "ORDER BY lastname, firstname";

$sqlResults = selectResults($db, $sql_statement);

$error_or_rows = $sqlResults[0];

if (substr($error_or_rows, 0 , 5) == 'ERROR')
{
	$outputDisplay .= "<br />Error on DB";
	$outputDisplay .= $error_or_rows;
} else {

	$arraySize = $error_or_rows;
	$outputDisplay .= '<table id="resultstable" style="overflow-x:auto;">';
	$outputDisplay .= '<tr><th>Last Name</th><th>First Name</th></tr>';
	for ($i=1; $i <= $error_or_rows; $i++)
	{
		$myrowcount++;
		$firstname = $sqlResults[$i]['firstname'];
		$lastname = $sqlResults[$i]['lastname'];
		$pcat 	   = $sqlResults[$i]['pcat'];
		$contactid = $sqlResults[$i]['contact_id'];
		$outputDisplay .= "<tr>";
		$outputDisplay .= "<td>".$firstname.' '.$lastname."</td>";
			$outputDisplay .="<td>".$contactid."</td>";
		$outputDisplay .= "<tr>";
		$outputDisplay .="<td rowspan=1>&nbsp;$pcat</td>";
	
		
		$outputDisplay .="</tr>";
		$outputDisplay .= "</tr>";
	}

	$outputDisplay .= "</table>";
}

?>
<?php
	$outputDisplay .= "<br /><br /><b>Number of Rows in Results: $myrowcount </b><br /><br />";
	print $outputDisplay;
?>
</div>

 <div id="main" class="main">
    <form action="insert1.php" id="frmBox" method="post" onsubmit="return formSubmit();">
      <table style="width:100%">
  <tr>
    <th>First Name: </th>
    <th><input type='text' name='firstname' class="inp" size='20'  /></th>
    <th>Last Name: </th>
    <th><input type='text' name='lastname' class="inp" size='20' /></th>
  </tr>
  <tr>
    <th>Pages Category: </th>
    <th><input type='text' name='pcat' class="inp" size='20' /></th>
    <th>congroup: </th>
    <th><input type='text' name='congroup' class="inp" size='20' /></th>
  </tr>
  <tr>
    <th>Category Type:</th>
    <th> <input type='text' name='cattype' class="inp" size='20' /></th>
    <th>Company: </th>  
    <th><input type='text' name='company' class="inp" size='20' /></th>
    
  </tr>
    <tr>
      <th>Position:</th>
        <th><input type='text' name='position' class="inp" size='20' /></th>
 
    </tr>
  <tr>
    <th>Email:</th>
    <th><input type='text' name='email' class="inp" size='20' /> </th>
    <th>Website: </th>
    <th><input type='text' name='website' class="inp" size='20' /></th>
  
  </tr>
  <tr>
    <th>H/D Phone: </th>
    <th><input type='text' name='phone' class="inp" size='20'  /></th>
    <th>Mobile Phone: </th>
    <th><input type='text' name='mphone' class="inp" size='20' /></th>
  </tr>
  <tr>
    <th>Work Phone: </th>
    <th><input type='text' name='wphone' class="inp" size='20' /> </th>
    <th>Fax: </th>
    <th><input type='text' name='fax' class="inp" size='20' /> </th>
  
  </tr>
  <tr>
    <th>Address 1: </th>
    <th><input type='text' name='add1' class="inp" size='50' /></th>
  </tr>
  <tr>
    <th>Address 2:</th>
    <th><input type='text' name='add2' class="inp" size='50' /></th>
  </tr>
  <tr>
    <th>City: </th>
    <th><input type='text' name='city' class="inp" size='20' /> </th> 
    <th>State:</th>
    <th><input type='text' name='state' class="inp" size='20' /> </th>
  </tr>
  <tr>
    <th>Zip/Postal Code:</th>
    <th><input type='text' name='zip' class="inp" size='20' /></th>
    <th>Country:</th>
    <th><input type='text' name='country' class="inp"  size='20' /></th>
  </tr>
  <tr>
    <th>Reference:</th>
    <th><input type='text' name='reference' class="inp" size='20' /></th>
    <th>Date Added:</th>
    <th> <input type='text' name='entrydate' class="inp" size='20' /></th>
  </tr>
  <tr>  
    <th>Entered By: </th>
    <th> <input type='text' name='enteredby' class="inp" size='20' /></th>
  </tr>
  <tr>
    <th>Notes:</th>
    <th><textarea name="notes" row="10" class="inp" cols="20"></textarea></th>
    
  </tr>
  <tr>
  	<th><input type="submit" name="submit" class="sub-btn" value="Submit"></th>
  </tr>
      <h3 id="success"></h3>
</table>

    </form> 
 </div>
<div id="results">
</div>

<script src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
		function formSubmit(){
			$.ajax({
				type:'POST',
				url:'insert1.php',
				data:$('#frmBox').serialize(),
				success:function(response){
					$('#success').html(response);
				}
				});
			var form=document.getElementById('frmBox').reset();
			return false;
			}
			
	function addRowHandlers() {
    	var table = document.getElementById("resultstable");
    	var rows = table.getElementsByTagName("tr");
    	for (i = 0; i < rows.length; i++) {
       	 var currentRow = table.rows[i];
       	 var createClickHandler = function(row) {
         	return function() { 
            	var cell = row.getElementsByTagName("td")[1];
                var id = cell.innerHTML;
                alert("id:" +id);
				function formPopulate(id){
					$.ajax({
						url: "result.php",
						success: (function(result){
						$("results").html(result);
						})
					})
						
				}
                        };
                };
                currentRow.onclick = createClickHandler(currentRow);
                                }
                          }
                window.onload = addRowHandlers();
	</script>
</body>

</html>


Results.php


<!doctype html>
<html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="displayContacts">
<?php

//**********************************************
//*
//*  Connect to MySQL and Database
//*
//**********************************************

$db = mysqli_connect('localhost','root','', 'test');

if (!$db)
{
	print "<h1>Unable to Connect to MySQL</h1>";
}


include "0811_common_functions_mysqli.php";
$outputDisplay = "";
$myrowcount = 0;


//**********************************************
//*
//*  SELECT from table and display Results
//*
//**********************************************
$sql_statement  = "SELECT firstname, lastname, pcat, contact_id ";
//, congroup, cattype, company, position, email, website, phone, mphone, wphone, fax, add1, add2, city, state, zip, country, reference, entrydate, enteredby, notes ";
$sql_statement .= "FROM contacts ";
$sql_statement .= "ORDER BY lastname, firstname";

$sqlResults = selectResults($db, $sql_statement);

$error_or_rows = $sqlResults[0];

if (substr($error_or_rows, 0 , 5) == 'ERROR')
{
	$outputDisplay .= "<br />Error on DB";
	$outputDisplay .= $error_or_rows;
} else {

	$arraySize = $error_or_rows;
	$outputDisplay .= '<table id="result" style="overflow-x:auto;">';
	for ($i=1; $i <= $error_or_rows; $i++)
	{
		$myrowcount++;
		$firstname = test_get($sqlResults[$i]['firstname']);
		$lastname = test_get($sqlResults[$i]['lastname']);
		$pcat 	   = test_get($sqlResults[$i]['pcat']);
		$contactid = $sqlResults[$i]['contact_id'];
		$outputDisplay .= "<tr>";
		$outputDisplay .= "<td>".$firstname.' '.$lastname."</td>";
			$outputDisplay .="<td>".$contactid."</td>";
		$outputDisplay .= "<tr>";
		$outputDisplay .="<td rowspan=1>&nbsp;$pcat</td>";
	
		
		$outputDisplay .="</tr>";
		$outputDisplay .= "</tr>";
	}

	$outputDisplay .= "</table>";
	mysqli_close($conn);
}
	function test_get($data){
		
	$data=trim($data);
	$data=stripslashes($data);
	$data=htmlspecialchars($data);
	return $data;	
	}

?>


</div>
</body>
</html>

insert.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
<?php
$servername = "localhost";
$username= "root";
$dbpassword = "";
$dbname="test";
$conn=mysqli_connect($servername, $username, $dbpassword, $dbname);
if(!$conn){
	die("could not connect:".mysqli_connect_error());	
} else{


		$firstname=test_input($_POST['firstname']);
		$lastname=test_input($_POST['lastname']);
		$pcat=test_input($_POST['pcat']);
		$congroup=test_input($_POST['congroup']);
		$cattype=test_input($_POST['cattype']);
		$company=test_input($_POST['company']);
		$position=test_input($_POST['position']);
		$email=test_input($_POST['email']);
		$website=test_input($_POST['website']);
		$phone= test_input($_POST['phone']);
		$mphone=test_input($_POST['mphone']);
		$wphone=test_input($_POST['wphone']);
		$fax=test_input($_POST['fax']);
		$add1=test_input($_POST['add1']);
		$add2=test_input($_POST['add2']);
		$city=test_input($_POST['city']);
		$state=test_input($_POST['state']);
		$zip=test_input($_POST['zip']);
		$country=test_input($_POST['country']);
		$reference=test_input($_POST['reference']);
		$entrydate=test_input($_POST['entrydate']);
		$enteredby=test_input($_POST['enteredby']);
		$notes=test_input($_POST['notes']);

		
		
		$sql="INSERT INTO contacts(firstname, lastname, pcat, congroup, cattype, company, position, email, website, phone, mphone, wphone, fax, add1, add2, city, state, zip, country, reference, entrydate, enteredby, notes) ";
	$sql .= "values (";
	$sql .= "'".$firstname."', '".$lastname."', '".$pcat."', '".$congroup."', '".$cattype."', '".$company."', '".$position."', '".$email."', '".$website."', '".$phone."', '".$mphone."', '".$wphone."', '".$fax."', '".$add1."', '".$add2."', '".$city."', '".$state."', '".$zip."', '".$country."', '".$reference."', '".$entrydate."', '".$enteredby."', '".$notes."'";
	$sql .= ")";
		if(mysqli_query($conn, $sql)){
			echo "Record Inserted";
			}else{
				echo "insert failed";	
			}

	mysqli_close($conn);
}
	function test_input($data){
		
	$data=trim($data);
	$data=stripslashes($data);
	$data=htmlspecialchars($data);
	return $data;	
	}


?>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

对于表格tr，你调用onclick功能并通过它发送一个id 

<tr onClick="formPopulate(id)" >

当funtion触发器调用ajax调用以检索数据并附加到表单

时

在javascript中

 function formPopulate(id) { 
    //send an ajax call here to get the data without reloading the page 
//after ajax call append the values of ajax response to the form
    }
相关问题
最新问题