左側の列はmysqlからループ文で読み取って各行に表示したものです。右側は、各レコードの特定のコンテンツ フレーム (つまり、多くの空のボックス) です。私たちが達成したい目標は、左側のレコード名をクリックすると、右側の各空のボックスにレコードの特定の内容が表示されることです (実際には、各フィールドの内容が各空のボックスに入力されます)。 。
左側のレコード名をクリック可能にするには、どのような簡単なフレームワークを使用する必要がありますか?次に、レコードの読み取りを制御し、mysql から特定のレコード情報を読み取るためにどの変数が渡されますか (レコードの内容があれば、各空のボックスに表示するのは難しくないようです。この手順を完了できます)。もちろん、各レコードの具体的な内容はすでに mysql に存在するので、それをクエリするだけです。
ここにいる専門家の皆様、緊急の質問なので助けてください。ありがとう。
ajaxでやってみよう
左側のレコード名をクリックすると、ajaxを使用してレコード名をバックグラウンドに送信し、対応するすべての情報をクエリします。戻った後、入力します。箱に入っています
返信ありがとうございます。
私は ajax の使用が初心者なのですが、重要な文や重要なポイントは何でしょうか? 考えるべきケースへのリンクもありますか?
ありがとうございます。
すぐにデモを書きます
よろしくお願いします。
デモアドレス http://www.colg.biz/demo/d1.php
コード
表示ページ
<?php header("Content-Type:text/html;charset=utf-8"); mysql_connect('localhost','colg_demo','colg__'); mysql_select_db('colg_demo'); function getdata($sql) { $result=mysql_query($sql); if($result)$count = mysql_num_rows($result); for($i=0;$i<$count;$i++) { mysql_data_seek($result,$i); $data[$i] = mysql_fetch_assoc($result); } return $data; } $data = getdata("select * from demo"); ?><style type="text/css"> .left{float:left;width:100px;border:1px solid grey;height:300px;} .right{float:left;width:800px;border:1px solid grey;height:300px;margin-left:15px;} .left_button{margin:5px;border:1px solid #ccc;cursor:pointer;} td{margin:1px;border:1px solid #ccc;}</style><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".left_button").click(function(){ $(this).css("background","#EEE"); $(this).siblings().css("background","white"); var n = $(this).text(); $.ajax({ type:"get", url:"ajax.php", data:{ n:n }, success:function(msg){ msg = eval("("+msg+")") $(".show_tr").html(msg); } }); }); }); </script><div class="left"> <?php foreach($data as $each){?> <div class="left_button"><?php echo $each['col3'];?></div> <?php } ?></div><div class="right"> <table> <tr> <td>id</td> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <tr> <tr class="show_tr"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <tr> </table></div><?php header("Content-Type:text/html;charset=utf-8"); mysql_connect('localhost','colg_demo','colg__'); mysql_select_db('colg_demo'); mysql_query("set names utf8"); function getdata($sql) { $result=mysql_query($sql); if($result)$count = mysql_num_rows($result); for($i=0;$i<$count;$i++) { mysql_data_seek($result,$i); $data[$i] = mysql_fetch_assoc($result); } return $data; } if($_GET){ $n = $_GET['n']; $data = getdata("select * from demo where col3 = '$n'"); if($data){ $html = ""; foreach($data[0] as $each){ $html .= "<td>".$each."</td>"; } } echo json_encode($html);exit; }?> ため息…アカウントとパスワードが漏洩してる…。 .
に変更してください
次の質問は、スコアをどのように与えるかです。ただのタイアップですか？
メイン プログラムとページ処理プログラムがあります。2 番目のページ処理プログラムは ajax.php であるはずです。 ajax.phpとプログラムを同じディレクトリに置くように変更する必要があるようですよね？
メイン プログラムとページ処理プログラムがあります。2 番目のページ処理プログラムは ajax.php であるはずです。 ajax.phpとプログラムを同じディレクトリに置くように変更する必要があるようですよね？
別のディレクトリにパスを記述するだけで済みます。「HTML パス」を調べてください。
詳細はまた考えますので、何かありましたらお気軽にご教示ください。
コード
表示ページ
<?php header("Content-Type:text/html;charset=utf-8"); mysql_connect('localhost','colg_demo','colg__'); mysql_select_db('colg_demo'); function getdata($sql) { $result=mysql_query($sql); if($result)$count = mysql_num_rows($result); for($i=0;$i<$count;$i++) { mysql_data_seek($result,$i); $data[$i] = mysql_fetch_assoc($result); } return $data; } $data = getdata("select * from demo"); ?><style type="text/css"> .left{float:left;width:100px;border:1px solid grey;height:300px;} .right{float:left;width:800px;border:1px solid grey;height:300px;margin-left:15px;} .left_button{margin:5px;border:1px solid #ccc;cursor:pointer;} td{margin:1px;border:1px solid #ccc;}</style><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".left_button").click(function(){ $(this).css("background","#EEE"); $(this).siblings().css("background","white"); var n = $(this).text(); $.ajax({ type:"get", url:"ajax.php", data:{ n:n }, success:function(msg){ msg = eval("("+msg+")") $(".show_tr").html(msg); } }); }); }); </script><div class="left"> <?php foreach($data as $each){?> <div class="left_button"><?php echo $each['col3'];?></div> <?php } ?></div><div class="right"> <table> <tr> <td>id</td> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <tr> <tr class="show_tr"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <tr> </table></div><?php header("Content-Type:text/html;charset=utf-8"); mysql_connect('localhost','colg_demo','colg__'); mysql_select_db('colg_demo'); mysql_query("set names utf8"); function getdata($sql) { $result=mysql_query($sql); if($result)$count = mysql_num_rows($result); for($i=0;$i<$count;$i++) { mysql_data_seek($result,$i); $data[$i] = mysql_fetch_assoc($result); } return $data; } if($_GET){ $n = $_GET['n']; $data = getdata("select * from demo where col3 = '$n'"); if($data){ $html = ""; foreach($data[0] as $each){ $html .= "<td>".$each."</td>"; } } echo json_encode($html);exit; }?> 右側の両方の項目を選択解除しますか? それとも、左側をクリックした後にいずれか 1 つを選択しますか?
それらの違いは、後者には、選択された入力タグに selected="checked" のみがあることです
既存の入力フォームは大まかに次のとおりです。
form action="main/inputDriver.php" method="post">
1
form action="main/inputDriver.php" になります。 " method="post">
オプション 1
オプション 2
このchecked=checked「どこに出現するか」をajaxが指すPHPプログラム内で判断して出力します
後者を使うと、jsが配列を処理する際に該当するフィールドを使って判断し、これをchecked=を追加します選択する必要があるものに「チェックを入れる」
Ajax を使用して「すべての HTML を返す」か、「PHP で配列を返し、それを処理するために JS を使用する」のですか?直接の出力は
;/input>
オプション 2
你ajax采用"PHP返回全部HTML"还是采用"PHP返回数组用js来处理"?
如果是前者 直接输出为
form action="main/inputDriver.php" method="post">
选项一
选项二
demo地址 http://www.colg.biz/demo/d1.php
代码
显示页
<?php header("Content-Type:text/html;charset=utf-8"); mysql_connect('localhost','colg_demo','colg__'); mysql_select_db('colg_demo'); function getdata($sql) { $result=mysql_query($sql); if($result)$count = mysql_num_rows($result); for($i=0;$i<$count;$i++) { mysql_data_seek($result,$i); $data[$i] = mysql_fetch_assoc($result); } return $data; } $data = getdata("select * from demo"); ?><style type="text/css"> .left{float:left;width:100px;border:1px solid grey;height:300px;} .right{float:left;width:800px;border:1px solid grey;height:300px;margin-left:15px;} .left_button{margin:5px;border:1px solid #ccc;cursor:pointer;} td{margin:1px;border:1px solid #ccc;}</style><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".left_button").click(function(){ $(this).css("background","#EEE"); $(this).siblings().css("background","white"); var n = $(this).text(); $.ajax({ type:"get", url:"ajax.php", data:{ n:n }, success:function(msg){ msg = eval("("+msg+")") $(".show_tr").html(msg); } }); }); }); </script><div class="left"> <?php foreach($data as $each){?> <div class="left_button"><?php echo $each['col3'];?></div> <?php } ?></div><div class="right"> <table> <tr> <td>id</td> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <tr> <tr class="show_tr"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <tr> </table></div><?php header("Content-Type:text/html;charset=utf-8"); mysql_connect('localhost','colg_demo','colg__'); mysql_select_db('colg_demo'); mysql_query("set names utf8"); function getdata($sql) { $result=mysql_query($sql); if($result)$count = mysql_num_rows($result); for($i=0;$i<$count;$i++) { mysql_data_seek($result,$i); $data[$i] = mysql_fetch_assoc($result); } return $data; } if($_GET){ $n = $_GET['n']; $data = getdata("select * from demo where col3 = '$n'"); if($data){ $html = ""; foreach($data[0] as $each){ $html .= "<td>".$each."</td>"; } } echo json_encode($html);exit; }?>今天太晚了明天白天给你写.... 晚上的时间都给WOW了..
今天太晚了明天白天给你写.... 晚上的时间都给WOW了..
这里先谢谢了。
demo地址 http://www.colg.biz/demo/d1.php
表结构和内容
显示页面代码
<?php //PHP区域 header("Content-Type:text/html;charset=utf-8"); mysql_connect('localhost','xxxxxx','xxxxxxxxxx'); mysql_select_db('xxxxxxxx'); function getdata($sql) { $result=mysql_query($sql); if($result)$count = mysql_num_rows($result); for($i=0;$i<$count;$i++) { mysql_data_seek($result,$i); $data[$i] = mysql_fetch_assoc($result); } return $data; } $data = getdata("select * from demo");?><!--CSS区域--><style type="text/css"> .left{float:left;width:100px;border:1px solid grey;height:300px;} .right{float:left;width:800px;border:1px solid grey;height:300px;margin-left:15px;} .left_button{margin:5px;border:1px solid #ccc;cursor:pointer;} td{margin:1px;border:1px solid #ccc;}</style><!--JS区域--><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".left_button").click(function(){ $(this).css("background","#EEE"); $(this).siblings().css("background","white"); var n = $(this).text(); $.ajax({ type:"get", url:"ajax.php", data:{ n:n }, success:function(msg){ msg = eval("("+msg+")"); //将json字符串转化为js数组对象 $(".show_tr > td:eq(0)").text(msg.id); //将数组的每个元素写到指定位置 $(".show_tr > td:eq(1)").text(msg.col1); $(".show_tr > td:eq(2)").text(msg.col2); $(".show_tr > td:eq(3)").text(msg.col3); $(".show_tr > td:eq(4)").text(msg.col4); var gender = msg.gender; if(gender == 1){ //如果为男,第一个单选被选中 $(".show_tr > td:eq(5) > input[name='gender']:eq(0)").attr("checked","checked"); }else{ //如果为女 $(".show_tr > td:eq(5) > input[name='gender']:eq(1)").attr("checked","checked"); } } }); }); }); </script><!--html区域--><div class="left"> <?php foreach($data as $each){?> <div class="left_button"><?php echo $each['col3'];?></div> <?php } ?></div><div class="right"> <table> <tr> <td>id</td> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>性别</td> <tr> <tr class="show_tr"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td><input type="radio" name="gender">男<input type="radio" name="gender">女</td> <tr> </table></div><?php header("Content-Type:text/html;charset=utf-8"); mysql_connect('localhost','xxxxxxxx','xxxxxxxxx'); mysql_select_db('xxxxxxxx'); mysql_query("set names utf8"); function getdata($sql) { $result=mysql_query($sql); if($result)$count = mysql_num_rows($result); for($i=0;$i<$count;$i++) { mysql_data_seek($result,$i); $data[$i] = mysql_fetch_assoc($result); } return $data; } if($_GET){ $n = $_GET['n']; $data = getdata("select * from demo where col3 = '$n'"); echo json_encode($data[0]);exit; }?> 用ajax做吧
当你点击左侧的记录名时,将记录名用ajax传到后台去查询对应的全部信息 返回后填充至框框内
demo地址 http://www.colg.biz/demo/d1.php
表结构和内容
显示页面代码
<?php //PHP区域 header("Content-Type:text/html;charset=utf-8"); mysql_connect('localhost','xxxxxx','xxxxxxxxxx'); mysql_select_db('xxxxxxxx'); function getdata($sql) { $result=mysql_query($sql); if($result)$count = mysql_num_rows($result); for($i=0;$i<$count;$i++) { mysql_data_seek($result,$i); $data[$i] = mysql_fetch_assoc($result); } return $data; } $data = getdata("select * from demo");?><!--CSS区域--><style type="text/css"> .left{float:left;width:100px;border:1px solid grey;height:300px;} .right{float:left;width:800px;border:1px solid grey;height:300px;margin-left:15px;} .left_button{margin:5px;border:1px solid #ccc;cursor:pointer;} td{margin:1px;border:1px solid #ccc;}</style><!--JS区域--><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".left_button").click(function(){ $(this).css("background","#EEE"); $(this).siblings().css("background","white"); var n = $(this).text(); $.ajax({ type:"get", url:"ajax.php", data:{ n:n }, success:function(msg){ msg = eval("("+msg+")"); //将json字符串转化为js数组对象 $(".show_tr > td:eq(0)").text(msg.id); //将数组的每个元素写到指定位置 $(".show_tr > td:eq(1)").text(msg.col1); $(".show_tr > td:eq(2)").text(msg.col2); $(".show_tr > td:eq(3)").text(msg.col3); $(".show_tr > td:eq(4)").text(msg.col4); var gender = msg.gender; if(gender == 1){ //如果为男,第一个单选被选中 $(".show_tr > td:eq(5) > input[name='gender']:eq(0)").attr("checked","checked"); }else{ //如果为女 $(".show_tr > td:eq(5) > input[name='gender']:eq(1)").attr("checked","checked"); } } }); }); }); </script><!--html区域--><div class="left"> <?php foreach($data as $each){?> <div class="left_button"><?php echo $each['col3'];?></div> <?php } ?></div><div class="right"> <table> <tr> <td>id</td> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>性别</td> <tr> <tr class="show_tr"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td><input type="radio" name="gender">男<input type="radio" name="gender">女</td> <tr> </table></div><?php header("Content-Type:text/html;charset=utf-8"); mysql_connect('localhost','xxxxxxxx','xxxxxxxxx'); mysql_select_db('xxxxxxxx'); mysql_query("set names utf8"); function getdata($sql) { $result=mysql_query($sql); if($result)$count = mysql_num_rows($result); for($i=0;$i<$count;$i++) { mysql_data_seek($result,$i); $data[$i] = mysql_fetch_assoc($result); } return $data; } if($_GET){ $n = $_GET['n']; $data = getdata("select * from demo where col3 = '$n'"); echo json_encode($data[0]);exit; }?> 外側のボックスが欠落している場合は、HTML 構造を注意深く観察し、変更する必要があるデータのみを変更しても、長さと高さ以外は絶対にボックスが消えることはありません。 CSS が
2 に制約されない問題。eq(2) は 3 つ目を探しています。これも正しく記述できますか?こんな感じです
var type = msg.type;
if(type == 1) { type']:eq(2)").removeAttr("checked");
}
else
{ "checked"," selected");
$(".show_1 > input[name='type']:eq(1)").removeAttr("checked");
}
また、type などのキー文字は読むのが怖い...この場所で問題がないといいのですが
外側のボックスが欠落している場合は、HTML 構造を注意深く観察し、変更する必要があるデータのみを変更しても、長さと高さ以外は絶対にボックスが消えることはありません。 CSS が
2 に制約されない問題。eq(2) は 3 つ目を探しています。これも正しく記述できますか?こんな感じです
var type = msg.type;
if(type == 1) { type']:eq(2)").removeAttr("checked");
}
else
{ "checked"," selected");
$(".show_1 > input[name='type']:eq(1)").removeAttr("checked");
}
また、type などのキー文字は使うのが怖い… こういうところで問題ないといいですね
よろしくお願いします。
最初のオプションには値 1 が割り当てられ、2 番目のオプションには値 2 が割り当てられます。あなたが与えたステートメントに従って実行したところ、結果は次のとおりです。値が 2 の場合は常に 2 つのオプションは空で、値が 1 の場合は 2 番目のオプションが選択されます（ただし、実際には 2 番目のオプションには次のオプションが含まれている必要があります）値 2) 。
詳細に間違いがあると思います 1. コードは次のとおりです (変数の型を driverType に変更しました):
var driverType = msg.type;
if(driverType == 1)
{ ; input[name=' type']:eq(1)").attr("チェック済み","チェック済み");
$(".show_1 > input[name='type']:eq(2)" ).removeAttr("チェック済み");
}
lse
{
$(".show_1 > input[name='type']:eq(2)").attr("checked","checked");
$(".show_1 > input[name='type']:eq(1)").removeAttr("checked");
}
2. ボックスが欠落している場合、操作の結果は次のようになります:
しかし、実際には、元のステータスは次のとおりです:
HTML 部分のコードは次のとおりです:
ドライバーの種類: |
| |
以前は入力境界線がありましたが、現在は入力が置き換えられています
1 つは、値を入力値に直接挿入する方法です
そのまま書いてから td に境界線を追加して以前と同じようにします
あなたのために書かれた td.html (xxx) あなたの td にコンテンツがある場合、厳密に書く必要はありません。それに応じて変更されます
入力の値に値を挿入します。これはどのように変更すればよいですか?
あなたは、「あなたのために書かれた td.html(xxx) は、このように厳密に書く必要はありません。あなたの td にコンテンツがあれば、それに応じて変更されます。」と言いました。実際、それは td だけができるわけではないことを意味します。
これまでは入力の境界線でした。今は入力が置き換えられています。 1 つは入力の値に直接挿入する方法です。 2 つ目は、次の方法です。そのままにして、td に境界線を追加します。以前と同じように見えます
私があなたのために書いた td.html(xxx) は、td にコンテンツがある場合は厳密に記述する必要はありません。応じて変更してください
入力の値に値を挿入します。これはどのように変更すればよいですか?
あなたは、「あなたのために書かれた td.html(xxx) は、このように厳密に書く必要はありません。あなたの td にコンテンツがあれば、それに応じて変更されます。」と言いました。実際、それは td だけができるわけではないことを意味します。
td の中に入力があり、入力を乱暴に置き換えることはできません
$(".show_tr > td:eq(1) >input").val(msg.col1); のように書くことができます
まずは jquery オプションを試してみてください。このツールは非常に柔軟で、さまざまな方法で使用できます
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
