我是编码的新手，所以要温柔。我正在PHP中构建一个新的用户界面，用于我们县图书馆使用的婚姻列表数据库。我正在使用这个javascript代码，这是我在这里找到的解决方案的一部分，我虽然可以使用和修改相应的HTML来满足我的需求：
<--Javascript code-->
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
我修改了php页面内部html的主体，试图在左侧提供记录列表，当他们从列表中选择一条记录时，它会在右侧的div / table中显示允许他们在表单中编辑它，然后在进行更改后提交。它适用于您查看的前几个记录，但在第三次单击时它不再隐藏旧记录，它开始在右侧div中显示其他记录。出于某种原因，在两次成功显示之后，左侧列表中的第三个和任何进一步点击记录将开始在右侧div中显示越来越多的记录。任何有关这方面的帮助将不胜感激。这是PHP / HTML：
<--PHP Code-->
<?php
include 'config-admin-marriages.php';
if (isset($_POST['lastname'])) { $one=$_POST['lastname']; }
if (isset($_POST['firstname'])) { $two=$_POST['firstname']; }
$sql = 'SELECT * FROM names WHERE ';
if (!empty($one) && !empty($two)) {
$sql.="glast like :lastname and gfirst like :firstname or blast like :lastname and bfirst like :firstname";
} elseif (!empty($one)) {
$sql.="glast like :lastname or blast like :lastname";
} else {
$sql.="gfirst like :firstname or bfirst like :firstname";
}
$stmt = $conn->prepare($sql);
foreach ($_POST as $key => $value)
{
if (!empty($value)) {
$mod="$value%";
$stmt->bindValue(':'.$key, $mod);
}
}
$stmt->execute();
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
$numrows = $stmt->rowCount();
if ($numrows == 0) {
?>
<html>
<head>
<link href="style_results.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="contact">
<h1>No results were returned from your search.</h1>
</div>
</body>
</html>
<?php
} else {
?>
<!DOCTYPE HTML>
<html>
<head>
<title> Marriage Database Modification </title>
<link href="style_mod.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="/js/modpage.js"></script>
</head>
<body>
<div id="contact">
<table border="2" width="100%">
<tr><td colspan="7"><h1>Marriage Record Modifications</h2></td></tr>
<tr>
<td>
<table border="2" width="100%">
<div id="linkDiv">
<tr><th>Last Name</th><th>First Name</th><th>Last Name</th><th>First Name</th><th>Month</th><th>Day</th><th>Year</th><th>Page</th><th>Source</th><th>Select</th></tr>
<?php for ($x=0;$x < $numrows;$x++) { ?>
<tr><td><?php echo $row[$x]['glast']?></td><td><?php echo $row[$x]['gfirst']?></td><td><?php echo $row[$x]['blast']?></td><td><?php echo $row[$x]['bfirst']?></td><td><?php echo $row[$x]['month']?></td><td><?php echo $row[$x]['day']?></td><td><?php echo $row[$x]['year']?></td><td><?php echo $row[$x]['page']?></td><td><?php echo $row[$x]['id']?></td><td><input type="button" value="select" onclick="showDiv('<?php echo $row[$x]['id']?>');return false"></td></tr> <?php }?>
</div>
</table>
</td>
<td rowspan="6" height="800px" width="1000px">
<?php for ($x=0;$x < $numrows;$x++) { ?>
<div id="divLinks">
<div id="container<?php echo $row[$x]['id']?>" style="display:none">
<table border="2">
<tr>
<td>
<!-- The 4 container content divs. -->
<label><?php echo $row[$x]['id']?></label>
<form method="POST" action="showoutput.php">
<table height="790px" width="990px">
<tr>
<td valign="top"><label>Groom's Last name:</label></td>
<td><input name="glname" type="text" value="<?php echo $row[$x]['glast']?>" placeholder="Last Name of Groom [Required]"/></td>
<td valign="top"><label>Groom's First name:</label></td>
<td><input name="gfname" type="text" value="<?php echo $row[$x]['gfirst']?>" placeholder="First Name of Groom [Required]"/></td>
</tr>
<tr>
<td valign="top"><label>Bride's Last Name:</label></td>
<td><input name="blname" type="text" value="<?php echo $row[$x]['blast']?>" placeholder="Last Name of Bride [Required]"/></td>
<td valign="top"><label>Bride's First Name:</label></td>
<td><input name="bfname" type="text" value="<?php echo $row[$x]['bfirst']?>" placeholder="First Name of Bride [Required]"/></td>
</tr>
<tr>
<td valign="top"><label>Month:</label></td>
<td>
<select name="mon">
<option selected="selected" value="<?php echo $row[$x]['month']?>"><?php echo $row[$x]['month']?></option>
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sep">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select>
</td>
<td valign="top"><label>Day:</label></td>
<td><input name="da" type="text" value="<?php echo $row[$x]['day']?>"placeholder="Day number here [Required]"/></td>
</tr>
<tr>
<td valign="top"><label>Year:</label></td>
<td><input name="yr" type="text" value="<?php echo $row[$x]['year']?>"placeholder="4 digit year i.e. 1990 [Required]"/></td>
<td valign="top"><label>Page Number:</label></td>
<td><input name="page" type="text" value="<?php echo $row[$x]['page']?>"placeholder="Page Number i.e. 4D [Required]"/></td>
</tr>
<tr>
<td valign="top"><label>Source:</label></td>
<td>
<select name="src">
<option selected="selected" value="<?php echo $row[$x]['source']?>"><?php echo $row[$x]['source']?></option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
<option value="Greenville News">Greenville News</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="mod" value="Modify Record"></td>
<td colspan="2"><input type="submit" name="del" value="Delete Record"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</div>
<?php } ?>
</td>
</tr>
</table>
</div>
</body>
</html>
<?php } ?>
如果有更好的方法，我也是耳朵。再次感谢。如果代码格式不好，我很抱歉，因为这是我第一次使用这些论坛。我试图对它进行空间修改，并且它在代码块中没有改变。
答案 0 :(得分：0)
以下是我修改过的代码视图，以及一个示例。
使用全局变量的压缩代码：
<强> JSFIDDLE DEMO
var lastDiv = false;
function showDiv(idInfo) {
var elm = document.getElementById('container'+idInfo);
if ( lastDiv ) {
lastDiv.style.display = 'none';
}
elm.style.display = 'block';
lastDiv = elm;
}
最后使用像以前一样的循环：
<强> JSFIDDLE DEMO
function showDiv(idInfo) {
var elm = document.getElementById('container'+idInfo),
cdiv = document.getElementById("divLinks"),
div = cdiv.getElementsByTagName("div");
for( var i=0; i<div.length; i++ ) {
div[i].style.display = 'none';
}
elm.style.display = 'block';
}
这将选择要显示的目标，然后仅循环显示div链接，确保在显示目标之前隐藏它们。