Question

我制作了一个使用click和dblclick功能的DIV（表）。我可以在其中一个DIV元素上单击一次或双击时使用三种不同的颜色，标准颜色为绿色。我现在的问题是，如何将最后使用的颜色保存到mysql数据库？如果通过单击一次将07 DIV元素设置为黄色我想保存它，直到我再次使用此表满足我的需要。

这是我到目前为止使用的代码。我真的不知道有关MYSQL数据库的信息，但希望我找到一个可以给我一些帮助的人。谢谢！

    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>

    <head>
    <script type="text/javascript" src="jquery.min.js"></script>

    <style>

    div { color:white; font-size:36px; font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; background: #33CC33; cursor: pointer; padding: 10px; margin:5px; border-radius: 5px; }
    div.red-cell { border-radius: 5px; background: #F00000; }
    div.yellow-cell { border-radius: 5px; background: #FF9900; } 

    .auto-style1 { color: #FFFFFF; font-size:30px; }
    .auto-style2 { color: #33CC33; }
    .auto-style3 { color: #F00000; }
    .auto-style4 { color: #FF9900; }
    .auto { float:left;width:17%; height:12%; }


    </style>

    <script>

    $( function() {
    $('div').dblclick( function() {
    $(this).toggleClass("red-cell");
    } );
    } );

    $( function() {
    $('div').click( function() {
    $(this).toggleClass("yellow-cell");
    } );
    } );


    </script>
    </head>
    <body>

    <div class="auto">07</div>
    <div class="auto">09</div>
    <div class="auto">11</div>
    <div class="auto">15</div>
    <div class="auto">16</div>

    <br style="clear:both;" />

    <div class="auto">17</div>
    <div class="auto">19</div>
    <div class="auto">20</div>
    <div class="auto">21</div>
    <div class="auto">22</div>

    <br style="clear:both;" />

    <div class="auto">23</div>
    <div class="auto">25</div>
    <div class="auto">26</div>
    <div class="auto">27</div>
    <div class="auto">28</div>

    <br style="clear:both;" />

    <div class="auto">29</div>
    <div class="auto">40</div>
    <div class="auto">41</div>
    <div class="auto">42</div>
    <div class="auto">48</div>

    <br style="clear:both;" />

    <div class="auto">50</div>
    <div class="auto">52</div>

    <br style="clear:both;" />

    </body>
    </html>

Answer 1

好吧我已经为我的mysqli数据库做了一个设置，我能够读出到目前为止的数据。我现在想要的是，当我点击radiobutton时，我想将颜色$ row [2]更新为我选择的颜色。这是现在的代码。如何为颜色设置更新？

<!DOCTYPE html>
<html>
<head>
<style>

body { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"}

.auto,
.auto.empty {
height:auto;text-align: center; background-color: #33CC33;float:left;     
color:white; font-size:72px; cursor: pointer; -moz-user-select: none;
-webkit-user-select: none; -ms-user-select: none; -o-user-select: none;
user-select: none;
}

.auto.allocated {
background-color:#E30003;  float:left; color:white; font-size:72px;
cursor: pointer;
}

.auto.occupied { background-color: #FFDD00; float:left; color:white;
font-size:72px;color:#555555; cursor: pointer;
}

.auto fieldset {
display: none;
}

.auto {
height: auto; width: 20%; display: ; float: left;color:white;
font-size:72px; cursor: pointer; margin-bottom: 5px;
}

</style>
<script src="jquery.min.js"></script>
<body>

<script> 

$( function() {

$(".auto").click(function() {
var a = $(this).find("input:radio");
var b = a.index(a.filter(":checked"));
var c = $(this).closest(".auto");
$(c).removeClass($(a[b]).val());
if (b !== a.length - 1) b++; else b = 0;
$(a[b]).prop("checked", true);
$(c).addClass($(a[b]).val());
});


});


</script>

<form action="" method="post">
<?

$con = new mysqli("localhost", "user", "pass", "db", port);
if ($con->connect_errno) {
echo "Failed to connect to MySQL: (" . $con->connect_errno . ") " . $con->connect_error;
}

$sql="SELECT id,slot,color FROM slots";

if ($result=mysqli_query($con,$sql))
{

while ($row=mysqli_fetch_row($result))
{
echo "<div class='auto'><label>$row[1]</label>
<fieldset>
<input type='radio' name='slot$row[1]' id='$row[0]' value='$row[2]' checked>
<input type='radio' name='slot$row[1]' id='$row[0]' value='allocated'>
<input type='radio' name='slot$row[1]' id='$row[0]' value='occupied'>
</fieldset>
</div>";
}

mysqli_free_result($result);
}

mysqli_close($con);





?>
</form>

</body>
</html>

Mysql表看起来像这样，工作得很好。

创建表

CREATE TABLE `slots` (
`id` int(10) UNSIGNED NOT NULL,
`slot` varchar(150) NOT NULL,
`color` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO TABLE

INSERT INTO `slots` (`id`, `slot`, `color`) VALUES
(1, '07', 'empty'),
(2, '09', 'empty'),
(3, '11', 'empty'),
(4, '15', 'empty'),
(5, '16', 'empty'),
(6, '17', 'empty'),
(7, '19', 'empty'),
(8, '20', 'empty'),
(9, '21', 'empty'),
(10, '22', 'empty'),
(11, '23', 'empty'),
(12, '25', 'empty'),
(13, '26', 'empty'),
(14, '27', 'empty'),
(15, '28', 'empty'),
(16, '29', 'empty'),
(17, '40', 'empty'),
(18, '41', 'empty'),
(19, '42', 'empty'),
(20, '48', 'empty'),
(21, '50', 'empty'),
(22, '52', 'empty');

在BIV元素中定位bgcolor并将其发送/保存到MYSQL

1 个答案: