如何讓MySQL和JS將衆多用戶添加到html div中並能夠刪除它們？

enter image description here 下面的程序讓用戶點擊下拉列表中的名稱，並且一旦用戶點擊一個名稱，AJAX使用PHP腳本從MySQL DB獲取用戶信息，並在下拉菜單中顯示它...如何讓MySQL和JS將衆多用戶添加到html div中並能夠刪除它們？

但是隻有一個人的信息可以一次顯示......我如何讓用戶通過點擊下拉列表中的名稱來添加他想要的人數？我不希望已經選擇的用戶已經顯示在列表中，但我希望用戶能夠刪除他們已選擇的人，然後刪除的用戶應該出現在下拉列表中...有一張圖它的工作原理，但我試圖做的是，當用戶點擊一個名稱，它將該人的姓名和信息添加到一個div中，然後當我選擇另一個人時，它也將該人添加到該div中。在div人們不應該在下拉列表中顯示出來，除非它們將被刪除..

HTML部分

<html> 
<head> 
<script type="text/javascript"> 
function showUser(str) 
{ 
if (str=="") 
    { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","getuser.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> 

<form> 
<select name="users" onchange="showUser(this.value)"> 
<option value="">Select a person:</option> 
<option value="1">Peter Griffin</option> 
<option value="2">Lois Griffin</option> 
<option value="3">Glenn Quagmire</option> 
<option value="4">Joseph Swanson</option> 
</select> 
</form> 
<br /> 
<div id="txtHint"><b>Person info will be listed here.</b></div> 

</body> 
</html>

php文件：

<?php 
$q=$_GET["q"]; 

$con = mysql_connect('localhost', 'peter', 'abc123'); 
if (!$con) 
    { 
    die('Could not connect: ' . mysql_error()); 
    } 

mysql_select_db("ajax_demo", $con); 

$sql="SELECT * FROM user WHERE id = '".$q."'"; 

$result = mysql_query($sql); 

echo "<table border='1'> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
<th>Hometown</th> 
<th>Job</th> 
</tr>"; 

while($row = mysql_fetch_array($result)) 
    { 
    echo "<tr>"; 
    echo "<td>" . $row['FirstName'] . "</td>"; 
    echo "<td>" . $row['LastName'] . "</td>"; 
    echo "<td>" . $row['Age'] . "</td>"; 
    echo "<td>" . $row['Hometown'] . "</td>"; 
    echo "<td>" . $row['Job'] . "</td>"; 
    echo "</tr>"; 
    } 
echo "</table>"; 

mysql_close($con); 
?>

來源

2011-10-12 Bulvak

這將是如果您使用JS庫，比如Prototype，jQuery或MooTools，這會更容易。 – megaflop

的JQuery可以幫助你。一旦你得到了它，你就可以做這樣的事情：



var removed_option; 

$("select option").click(function(){ 
    removed_option = $(this); // saves option in var, will use it later to put it back to select 
    $(this).remove(); // removes option from select 
    var data = {}; 
    data.selected_person = $(this).val(); 
    $.post("ajax.php", data, function(returned_data){ // make ajax call 
     $("#txtHint").html(returned_data); // put data from ajax into #txtHint 
    }); 
});

您可以用按鈕來添加一列，這將刪除該表並放回刪除選項：


$("#remove_table").click(function(){ 
    $(this).parents("table").remove(); // searches the DOM for button's parents which are tables and removes them 
    $("select").append(removed_option); // adds to your select previously removed, but saved, option 
});

來源

2011-10-12 20:17:54

謝謝我會試一試。 – Bulvak

閱讀jquery.com上的一些教程和示例，這非常容易學習。 –

如何讓MySQL和JS將衆多用戶添加到html div中並能夠刪除它們？

回答

相關問題