javascript - 我需要在 javascript/服务器端和客户端冲突中使用 php 变量

Question

我是编程新手，但我知道您需要一种服务器端语言来访问数据库。我正在使用 php 访问我的数据库并显示信息，但我需要使用 javascript 在按下按钮 (.click) 时在页面上四处移动信息。所以从 php 到 javascript 的数据转换给我带来了麻烦。

基本上，我正在构建一个系统，任何买票的人都会被输入到数据库中。我的工作人员转到一个页面，在该页面上，购票者显示在网页上的表格(预期出席)中，如我添加到 jsfiddle(javascript 框中的链接)的图片所示，然后他们选中一个框(复选框)如果这个人真的来了。单击一个按钮(好的)，我需要所有单击的复选框移动到(参加)网页上的表格。下面的代码和 fiddle 。

PHP

<?php
//Connect to the database
$mysqli = NEW mysqli('localhost:3306','root','password','roster');
//Query the database
$resultSet = $mysqli->query("SELECT * FROM attendant_info");
//Count the returned rows
if($resultSet->num_rows !=0) {
//Turn the results into an associative array
    while($rows = $resultSet->fetch_assoc())
    {
    $ID = $rows['ID'];
    $first_name = $rows['first_name'];
    $last_name = $rows['last_name'];
    $age = $rows['age'];
    $city = $rows['city'];
    $state = $rows['state'];
    $ticket = $rows['ticket'];
    $vip = $rows['vip'];

$entry = "<div id=\"port\"><div id=\"entry\"><!--start of entry-->
<div id=\"ID\"><!--start of ID-->$ID</div><!--end of ID-->
<div id=\"info\"><!--start of info-->
<infowrapper>
<booking><first>First Name:</first><slot1>$first_name</slot1></booking>
<booking><last>Last Name:</last><slot1>$last_name</slot1></booking>
<booking2><age>Age:</age><slot1>$age</slot1></booking2>
<booking4><city>City:</city><slot1>$city</slot1></booking4>
<booking2><state>State:</state><slot1>$state</slot1></booking2>
<booking3><ticket>Ticket#:</ticket><slot1>$ticket</slot1></booking3>
<booking5><vip>VIP:</vip><slot1>$vip</slot1></booking5>
</infowrapper>
<form action=\"\">
Attending<input type=\"checkbox\" name=\"attending\" value=\"attending\">
</form>
</div><!--end of info-->
</div><!--end of entry-->
</div>";

    echo "$entry";
    }   
//Display the results
}else{
    echo "No results.";}
?>

Javascript(Jquery)

$(document).ready(function() {
    $(".bypass").click(function() {
        if ($("#checkbox").click){document.atbox += "entry";
        }
    });
});

Here是一个 fiddle ，所以你可以一起看到整个事情。我的 html 位于 fiddle 中，StackOverflow 让我很难发布它。 http://jsfiddle.net/oy81hrtp/1/

Answer 1

这可能会给你一些想法。

演示:
http://jsfiddle.net/sfohgrvL/1/

HTML:

<div style="border: 1px solid #000; padding:10px">
    <h1>Expected Attendance</h1>

    <div id="expected_attendance">
        <p><input type="checkbox" class="my_checkboxes" />Option1</p>
        <p><input type="checkbox" class="my_checkboxes" />Option2</p>
        <p><input type="checkbox" class="my_checkboxes" />Option3</p>
        <p><input type="checkbox" class="my_checkboxes" />Option4</p>
        <p><input type="submit" class="my_submit" /></p>
    </div>
</div>
<br></br>
<div style="border: 1px solid #000; padding:10px">
    <h1>Attendance</h1>

    <div id="attendance">
    </div>
</div>

JS:

$(function(){
    $(".my_submit").on('click', function(){
        ht = $("#attendance").html();
        $("input:checkbox[class=my_checkboxes]:checked").each(function()
        {
            var th = $(this);
            ht = ht + th.parent().html();
            th.parent().remove();
        });
        $("#attendance").html(ht);
    });
});