0

我有一个 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;
}
?>
4

2 回答 2

0

看看http://jsbin.com/iqicar/2

您可以轻松设置“委托事件”来侦听表格内的复选框更改事件。在事件处理程序中，您可以简单地使用 jQuery 查找<tr>然后执行各种操作 - 包括从该行的输入字段等中获取所有值并将它们存储在某处（可能通过 AJAX）。

请注意，我在 jsbin 中使用 jQuery UI 仅用于高亮效果：D

于 2013-07-06T07:43:42.993 回答
0 
<?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>
于 2013-07-06T10:44:26.290 回答