Javascript在PHP/HTML隐藏Div不工作
Javascript in PHP/HTML hiding Div not working
我对编码很陌生,所以请温柔一点。我正在用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 } ?>
如果有更好的方法,我也会洗耳恭听。再次感谢。如果代码格式不好,我很抱歉,因为这是我第一次使用这些论坛。我试图对它进行空间修改,但它在代码块中没有改变。
下面是我对您的代码所做的修改,以及一个示例。
使用全局变量的压缩代码:
JSFIDDLE演示
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演示
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链接,确保在显示目标之前将其隐藏。
相关文章:
- 点击选择Div不在IE上工作
- DIV怎么能像Javascript中的另一个元素一样工作呢
- Jquery Div 幻灯片从右到左切换无法正常工作
- 将DIV导出为PDF don'无法在Internet Explorer中工作
- 使用 JQUERY-Not 工作添加 Div
- 如何使 Dreamweaver AP Div 显示/隐藏功能在 IE9 中工作
- JavaScript 在 DIV 的加载内容中不能很好地工作
- 如何让这个可折叠的 DIV 工作
- javaScript onClick没有'当从另一个页面上的DIV内部加载的页面执行时,无法工作
- 链接无法在Ipad上的Div上工作-任何其他设备/浏览器都可以100%工作
- 每5秒自动刷新一个DIV代码不工作
- 点击更改Div类需要多次点击才能工作
- 在Div中更改innerHtml时,ScrollTop和ScrollTo不工作
- jQuery函数并没有按我的计划工作,DIV只是在点击时消失
- 在gridview事件处理程序中切换DIV可见性的代码不工作
- 渐明,淡出DIV上循环工作良好-但不显示第一个DIV
- 显示/隐藏内容在IE10及以下版本无法工作.Div不可点击
- 在Div内滚动不工作
- 一个简单的jQuery幻灯片显示工作的DIV
- 页眉内的Div /靠近页面顶部/在2次点击事件后不显示,而它的's页脚双胞胎工作- jquery