Question

我已经为表中的特定记录实现了一个切换开关按钮，它会动态更改记录的值。

现在我想对同一页面上的多个切换开关进行此操作。我应该怎么做（假设桌子的大小可以变化）？

数据库表包含2列（＆＃34; id＆＃34;，＆＃34;值＆＃34;）。＆＃34; ID＆＃34;将始终是独一无二的，价值＆＃34;将根据切换按钮（开/关）进行更改。

这是我的PHP代码

<?php
$query=mysql_connect("localhost","root","");
mysql_select_db("test",$query); //test is the database here
?>
<!DOCTYPE html>
<html>
<head>
<title>Multiple toggle switches</title> 
<link rel="stylesheet" href="stylingButton.css">
</head>
<body>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
<?php
$query3=mysql_query("select * from testin where id=1"); //testin is the table here
$query4=mysql_fetch_array($query3);
if($query4['choice']=="off")
{
echo "checked";
}
?>>
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script language="JavaScript" type="text/javascript">            
$(document).ready(function(){
$('#myonoffswitch').click(function(){
var myonoffswitch=$('#myonoffswitch').val();
if ($("#myonoffswitch:checked").length == 0)
{
var a=myonoffswitch;
}
else
{
var a="off";
}

$.ajax({
type: "POST",
url: "ajax.php",
data: "value="+a ,
success: function(html){
$("#display").html(html).show();
}
});

});
});
</script>  
<script language="JavaScript" type="text/javascript">            
$(document).ready( function(){
$(".cb-enable").click(function(){
var parent = $(this).parents('.switch');
$('.cb-disable',parent).removeClass('selected');
$(this).addClass('selected');
$('.checkbox',parent).attr('checked', true);
});
$(".cb-disable").click(function(){
var parent = $(this).parents('.switch');
$('.cb-enable',parent).removeClass('selected');
$(this).addClass('selected');
$('.checkbox',parent).attr('checked', false);
});
});
</script> 
</body>
</html>

这是ajax.php

<?php
$query=mysql_connect("localhost","root","");
mysql_select_db("test",$query);
if(isset($_POST['value']))
{
$value=$_POST['value'];
mysql_query("update testin set choice='$value' where id='1'");
echo "<h2>You have Chosen the button status as:" .$value."</h2>";
}
?>

这是styleButton.css

.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; 
overflow: hidden; 
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
width: 200%; margin-left: -100%;

}
.onoffswitch-inner:before, .onoffswitch-inner:after {
float: left; 
width: 50%; 
height: 30px; 
padding: 0; 
line-height: 30px;
font-size: 14px; 
color: white; 
font-family: Trebuchet, Arial, sans-serif; 
font-weight: bold;
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "OFF";
padding-left: 10px;
background-color: #2FCCFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "ON";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
width: 18px;
margin: 6px;
background: #FFFFFF;
border: 2px solid #999999; 
border-radius: 20px;
position: absolute; 
top: 0; 
bottom: 0; 
right: 56px;

}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

我的初步方法

我想过为每个切换开关分配id但是当表中的记录数量未知时可能会很困难，而且如果表的大小非常大（例如10000）会怎么样？

以下是我想要的Design草图

P.S-我在这里是新手，对于任何错误的语法都很抱歉：）

使用PHP和Ajax在数据库中动态修改多个切换开关

0 个答案: