php - ラジオボックスの値を返すための JavaScript コード

Question

テーブルの行の1つを左側のラジオボックスでマークしたいajaxテーブルがあります。問題は、javascriptが苦手なことです。このテーブルからIDでラジオボックスの値を取得したいマークされていますが、実際にはこの ajax テーブルは while ループと配列を使用してデータベースからの情報を表示します。javascript を使用して、ラジオボックスで選択した行の情報を取得または返すためのコードを誰でも記述できますか。

これは私のajaxテーブルです:

<?php
session_start();
?>
<?php
$connection = mysql_connect('localhost', '', '');
$db = mysql_select_db('students', $connection);
mysql_query("SET CHARACTER SET utf8;");
mysql_query("SET SESSION collation_connection = 'utf8_persian_ci'"); 
$term = strip_tags(substr($_POST['searchit'],0, 100));
$term = mysql_escape_string($term); // Attack Prevention
if($term=="")
echo " .enter a usernumber";
else{
$query = mysql_query("select * from test where username like '{$term}%'", $connection);
$string = '';
echo "<br>";
                        echo "<center>";
                                echo "<div>";
                                    echo "<div align='center' width = 900>";
                                         echo "<table class='styled-table' cellspacing='0' width='900' border='1'>";
                                            echo "<tr>";
                                                echo "<th width='10' scope='col'>Check</th>";
                                                echo "<th width='10' scope='col'>Username</th>";
                                                echo "<th width='10' scope='col'>Password</th>";
                                                echo "<th width='10' scope='col'>Name</th>";    
                                                echo "<th width='10' scope='col'>Last Name</th>";
                                                echo "<th width='10' scope='col'>Midterm</th>";
                                                echo "<th width='10' scope='col'>Class Mark</th>";
                                                echo "<th width='10' scope='col'>Final</th>";
                                                echo "<th width='10' scope='col'>State</th>";
                                                echo "<th width='10' scope='col'>Level</th>";
                                                echo "<th width='10' scope='col'>Teacher</th>";
                                                echo "<th width='10' scope='col'>Class Num</th>";
                                                echo "<th width='10' scope='col'>Receipt</th>";
                                                echo "<th width='10' scope='col'>Date</th>";
                                            echo "</tr>";



if (mysql_num_rows($query)){
while($row = mysql_fetch_assoc($query)){

                                                echo "<tr>";
                                                echo "<td align='center'><input class='styled-input'  type='checkbox' name='check' id='check' value= " . $row['check'] ."  ></td>";
                                                echo "<td align='center'><input class='styled-input'  type='text' name='user' id='user' value= " . $row['username'] ." ></td>";
                                                echo "<td align='center'><input class='styled-input'  type='text' name='pass' id='pass' value= " . $row['password'] ."  ></td>"; 
                                        ?>        <td align='center'><input class='styled-input'  type='text' name='name' id='name' value= "<? echo $row['name']; ?>" ></td>
                                                  <td align='center'><input class='styled-input'  type='text' name='lastname' id='lastname' value= "<? echo $row['lastname']; ?>" ></td>
                                                <td align='center'><input class='styled-input'  type='text' name='midmark' id='midmark'  value= "<? echo $row['midmark']; ?>" ></td>
                                                <td align='center'><input class='styled-input'  type='text' name='classmark' id='classmark'  value= "<? echo $row['classmark']; ?>" ></td>
                                                <td align='center'><input class='styled-input'  type='text' name='finalmark' id='finalmark'  value= "<? echo $row['finalmark']; ?>"></td>
                                                <td align='center'><input class='styled-input'  type='text' name='state' id='state' value= "<? echo $row['state']; ?>" ></td>
                                                <td align='center'><input class='styled-input'  type='text' name='level' id='level' value= "<? echo $row['level']; ?>" ></td>
                                                <td align='center'><input class='styled-input'  type='text' name='teacher' id='teacher' value= "<? echo $row['teacher']; ?>" ></td>
                                        <?php   echo "<td align='center'><input class='styled-input'  type='text' name='classnum' id='classnum' value= " . $row['classnum'] ." ></td>";
                                                echo "<td align='center'><input class='styled-input'  type='text' name='receipt' id='receipt' value= " . $row['receipt'] ." ></td>";
                                                echo "<td align='center'><input class='styled-input'  type='text' name='date' id='date' value= " . $row['date'] ." ></td>";     
                                            echo "</tr>";
                                        $_SESSION["suser"]=$row['username'] ;
                                        if(($row['check'])==true)
                                        {$_SESSION["sreceipt"]=$row['receipt'] ;}

                                        }
                                        echo "</table>";
                                    echo "</div>";
                                echo "</div>";
                            echo "</center>";


}else{
$string = "nothing found !";
$_SESSION["suser"]='';
$_SESSION["sreceipt"]='';
}

echo $string;
}
?>

score 0 · Accepted Answer

http://jsbin.com/iqicar/2をご覧ください

テーブル内のチェックボックス変更イベントをリッスンする「委任イベント」を簡単に設定できます。イベントハンドラでは、単純に jQuery を使用してを見つけて<tr>から、この行の入力フィールドなどからすべての値を取得してどこかに (おそらく AJAX 経由で) 保存するなど、あらゆる種類のことを行うことができます。

ハイライト効果のためだけにjsbinでjQuery UIを使用したことに注意してください:D

score 0 · Accepted Answer

<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <meta charset=utf-8 />
</head>
<body>



<?php
$connection = mysql_connect('localhost', '', '');
$db = mysql_select_db('students', $connection);
mysql_query("SET CHARACTER SET utf8;");
mysql_query("SET SESSION collation_connection = 'utf8_persian_ci'"); 
$term = strip_tags(substr($_POST['searchit'],0, 100));
$term = mysql_escape_string($term); // Attack Prevention

if($term=="")
echo " .enter user number ";
else{
$query = mysql_query("select * from test where username like '{$term}%'", $connection);
$string = '';
echo "<br>";
                        echo "<center>";
                                echo "<div>";
                                    echo "<div align='center' width = 900>";
                                         echo "<table class='styled-table' cellspacing='0' width='900' border='1'>";
                                            echo "<tr>";
                                                echo "<th width='10' scope='col'>Check</th>";
                                                echo "<th width='10' scope='col'>Username</th>";
                                                echo "<th width='10' scope='col'>Password</th>";
                                                echo "<th width='10' scope='col'>Name</th>";    
                                                echo "<th width='10' scope='col'>Last Name</th>";
                                                echo "<th width='10' scope='col'>Midterm</th>";
                                                echo "<th width='10' scope='col'>Class Mark</th>";
                                                echo "<th width='10' scope='col'>Final</th>";
                                                echo "<th width='10' scope='col'>State</th>";
                                                echo "<th width='10' scope='col'>Level</th>";
                                                echo "<th width='10' scope='col'>Teacher</th>";
                                                echo "<th width='10' scope='col'>Class Num</th>";
                                                echo "<th width='10' scope='col'>Receipt</th>";
                                                echo "<th width='10' scope='col'>Date</th>";
                                            echo "</tr>";



if (mysql_num_rows($query)){
while($row = mysql_fetch_assoc($query)){

                                                echo "<tr>";
                                                echo "<td align='center'><input class='styled-input' type='checkbox' name='check' id='check' ></td>";
                                                echo "<td align='center'><input class='styled-input' type='text' name='user' id='user' value= " . $row['username'] ." ></td>";
                                                echo "<td align='center'><input class='styled-input' type='text' name='pass' id='pass' value= " . $row['password'] ."  ></td>"; 
                                        ?>        <td align='center'><input class='styled-input' type='text' name='name' id='name' value= "<? echo $row['name']; ?>" ></td>
                                                  <td align='center'><input class='styled-input' type='text' name='lastname' id='lastname' value= "<? echo $row['lastname']; ?>" ></td>
                                                <td align='center'><input class='styled-input' type='text' name='midmark' id='midmark'  value= "<? echo $row['midmark']; ?>" ></td>
                                                <td align='center'><input class='styled-input' type='text' name='classmark' id='classmark'  value= "<? echo $row['classmark']; ?>" ></td>
                                                <td align='center'><input class='styled-input' type='text' name='finalmark' id='finalmark'  value= "<? echo $row['finalmark']; ?>"></td>
                                                <td align='center'><input class='styled-input' type='text' name='state' id='state' value= "<? echo $row['state']; ?>" ></td>
                                                <td align='center'><input class='styled-input' type='text' name='level' id='level' value= "<? echo $row['level']; ?>" ></td>
                                                <td align='center'><input class='styled-input' type='text' name='teacher' id='teacher' value= "<? echo $row['teacher']; ?>" ></td>
                                        <?php   echo "<td align='center'><input class='styled-input' type='text' name='classnum' id='classnum' value= " . $row['classnum'] ." ></td>";
                                                echo "<td align='center'><input class='styled-input' type='text' name='receipt' id='receipt' value= " . $row['receipt'] ." ></td>";
                                                echo "<td align='center'><input class='styled-input' type='text' name='date' id='date' value= " . $row['date'] ." ></td>";      
                                            echo "</tr>";

                                        $_SESSION["suser"]=$row['username'] ;
                                        if(($row['check'])==true)
                                        {$_SESSION["sreceipt"]=$row['receipt'] ;}

                                        }
                                        echo "</table>";
                                    echo "</div>";
                                echo "</div>";
                            echo "</center>";


}else{
$string = "nothing found !";
$_SESSION["suser"]='';
$_SESSION["sreceipt"]='';
}

echo $string;
}
?>
    <!--row selection -->
<script>
jQuery(function ($) {
  $('.styled-table').on('change', '.styled-input', function (event) {
    if (this.checked) {
      var row = $(this).closest('tr'),
          receiptValue = row.find('input[name=receipt]').val(); 
      alert(receiptValue);

    }
  });
});
</script>.
<!--row selection end -->
</body>
</html>

php - ラジオ ボックスの値を返すための JavaScript コード

2 に答える 2

Related

Reference

php - ラジオボックスの値を返すための JavaScript コード