我看过几篇有关使整个div可点击的文章，但我希望使其成为可选择的。
我所拥有的是一个php while循环，该循环显示基于用户进入mySQL数据库的表。该代码如下所示：
<div class='tracksub'>
<div class='headname'><div class='headtext'>Name</div></div>
<div class='headtype'><div class='headtext'>Type</div></div>
<div class='headbrand'><div class='headtext'>Brand</div></div>
<div class='headedp'><div class='headtext'>EDP</div></div>
<div class='headdiameter'><div class='headtext'>Diameter</div></div>
<div class='headflutes'><div class='headtext'>Flutes</div></div>
<!-- <div class='headaddremove'><div class='headtext'>Add/Remove Tool</div></div> -->
</div>";
$i = 0;
while($row = mysqli_fetch_assoc($resulttable)){
if($i%2 == 0){
echo "<div class='even' id='" . $row['pKey'] . "'>";
echo "<div class='name'><div class='tracktext'><a class='tracklink'>" . $row['name'] . "</a></div></div>";
echo "<div class='type'><div class='tracktext'>" . $row['type'] . "</div></div>";
echo "<div class='brand'><div class='tracktext'>" . $row['brand'] . "</div></div>";
echo "<div class='edp'><div class='tracktext'>" . $row['part_number'] . "</div></div>";
echo "<div class='diameter'><div class='tracktext'>" . $row['cutting_diam'] . "</div></div>";
echo "<div class='flutes'><div class='tracktext'>" . $row['flutes'] . "</div></div>";
//echo "<div class='addremove'><form id='addremove' method='POST' action=''><button type='submit' class='addbtn' name='add" . $row['pKey'] . "'>Add</button><button type='submit' class='removebtn' name='remove" . $row['pKey'] . "'>Remove</button></form></div>";
echo "</div>";
} else {
echo "<div class='odd'>";
echo "<div class='name'><div class='tracktext'><a href='" . $row['image'] . "'>" . $row['name'] . "</a></div></div>";
echo "<div class='type'><div class='tracktext'>" . $row['type'] . "</div></div>";
echo "<div class='brand'><div class='tracktext'>" . $row['brand'] . "</div></div>";
echo "<div class='edp'><div class='tracktext'>" . $row['part_number'] . "</div></div>";
echo "<div class='diameter'><div class='tracktext'>" . $row['cutting_diam'] . "</div></div>";
echo "<div class='flutes'><div class='tracktext'>" . $row['flutes'] . "</div></div>";
//echo "<div class='addremove'><form id='addremove' method='POST' action=''><button type='submit' class='addbtn' name='add" . $row['pKey'] . "'>Add</button><button type='submit' class='removebtn' name='remove" . $row['pKey'] . "'>Remove</button></form></div>";
echo "</div>";
}
if(isset($_POST['add' . $row['pKey'] .''])){
$add = $row['pKey'];
$sql = "UPDATE `cutting tools` SET `qty` = `qty` + 1 WHERE `pKey` = '$add'";
$conn->query($sql);
}
if(isset($_POST['remove' . $row['pKey'] .''])){
$remove = $row['pKey'];
$sql = "UPDATE `cutting tools` SET `qty` = `qty` - 1 WHERE `pKey` = '$remove'";
$conn->query($sql);
}
$i++;
}
echo "</div>";
我想选择的div是class =“ even”和class =“ odd”（每一个都是相同的，每行都有交替的背景色）。当用户选择整个行时，我想显示mySQL表中未在其中选择条目的表中显示的某些数据。布局看起来像这样：
<div class="rightbox">
<div class="tbdrawer">
</div>
<div class="bininfo">
<div>
<div class="toolimg">
<img src="" /> <!--src comes from selected mySQL row -->
</div>
<div class="toolinfoextra">
<!-- a couple rows of additional info go here -->
</div>
</div>
我对如何解决这个问题有一些想法，但是大部分时候我很沮丧。
将class =“ odd”和class =“ even”内容放入提交按钮中，并删除所有格式-本质上使按钮不可见。这样，我可以跟踪按下的按钮并通过执行以下操作显示其余数据：
if(isset($_POST['. $row['pKey'] .'])){ //where the buttons name is the primary key
$imglink = $row['image'];
$length = $row['length'];
}
依此类推，我要显示的每个数据。然后在每个div中，我可以回显$ length等，以使特定数据可显示。
我的另一个想法是使用Javascript使每个选项都可以选择，但是我对这种方法不太满意。如您所见，我要选择的div的class =“ even”具有等于该mySQL行的主键的ID。这里的想法是让我可以执行以下操作：
"<script type="text/javascript">
$( "#" . $row['pKey'] . "" ).focus(function() {"
$imglink = $row['image'];
"});
</script>"
然后本质上与PHP方法相同，其中每个div都回显仅在选中该行时才填充的变量。
我在哪里错了？有什么指针或更好的方法来解决这个问题？
参考方案
这是错误的做法-您应该执行以下操作：
<ul>
<?php
$i = 0;
while($row = mysqli_fetch_assoc($resulttable)){
echo<<<END
<a class="table-link" id="$i" href="#">
END;
if(i%2==0){
echo "<li class='odd'>";
} else {
echo "<li class='even'>";
}
echo <<< END
...
(here all div's)
...
</li>
</a>
<div id="modal-$i" class="rightbox">
<div class="tbdrawer">
</div>
<div class="bininfo">
<div>
<div class="toolimg">
<img src="" /> <!--src comes from selected mySQL row -->
</div>
<div class="toolinfoextra">
<!-- a couple rows of additional info go here -->
</div>
</div>
</div>
</div>
END;
i++;
}
?>
</ul>
CSS：
a.table-link:hover {
opacity: 0.8; // for e.g.
}
a.table-link:clicked {
background-color: blue;
}
.rightbox {
display: none;
}
.show {
display: block;
position: relative;
z-index: 1000;
top: 50px;
background-color: white;
}
和js：
for(el in document.getElementsByClassName('table-link')) {
el.onclick = () => {
document.getElementById('modal-$i')[0].classes.add('show')
return false // for cancel redirecting of href
}
}
那应该对您更好。您需要在某处添加一个按钮，该按钮将具有事件onclick，该事件将从模态中删除类show。
我已覆盖此网页上表单的.submit函数，因为该网页已加载在“ index.php”中的#mainContent内，并且我希望“提交”按钮仅替换此#mainContent。我正在尝试将数据从此表单获取到.php文件，以便对数据库进行查询（或简单地回显已填充的变量，以指示已传递数据）。我是AJAX的新手。有人可以向我解释如何将数据传递到.php文件，或者指向要…
使用php重新加载内容 - javascript在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…
在PHP文件中调用javascript函数并在加载HTML文件之后？ - javascript我需要在我的php中调用js函数，但无法正常工作。有人可以告诉我我在做什么错吗？我该如何轻松地做到这一点？谢谢！我有三个文件： mail.php负责发送$ _POST的内容（工作正常）。我调用我的javascript函数来切换模式，具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…
用jQuery填充模式形式 - javascript我正在将订单表从数据库绘制到datatables（jquery插件）中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段，并使其不可编辑或隐藏，但在提交模态表单时将其发布到服务器。表格和模式表…
保留文本区域的数据或值，然后选择输入 - javascript通过$ _POST提交表单时，输入文件值仍然保留。像这样： if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…