DHTML -点击按钮索引
DHTML -点击按钮索引
提问于 2012-01-10 11:05:49
我刚刚开始编码我的资产管理页面，管理员可以从网页管理所有资产。从这个页面中，admin可以重命名资产，并使用表单接口将尚未添加到db中的资产添加到db中。
下面是php文件中嵌入的html代码
<tr>
<td><img src="<?php echo $newAssetsUrl.$asset->name ?>" width="50px" height="50px"/></td>
<td><span name="inboxImgName"><?php echo $asset->name?></span>
<input type="button" name="inboxEdit" value="Rename" onclick="alert(this.name),toggleInboxEditSave(<?php echo $i?>)"/>
<input type="text" style="visibility:hidden"
name="inboxNewImageName" value="<?php $asset->name ?>"/>
</td>
<td><?php echo $asset->getTypeName()?></td>
<td><input type="checkbox" name="" value="Add"/>
<input type="hidden" name="imageName[]" value="<?php echo $asset->name ?>"/>
</tr>现在，javascript切换显示/隐藏编辑框以重命名资产名称，并切换按钮的文本以保存/编辑
function toggleInboxEditSave(idx){
btn = document.getElementsByName("inboxEdit")[idx];
curState = btn.value;
lbl = document.getElementsByName("inboxImgName")[idx];
txt = document.getElementsByName("inboxNewImageName")[idx];
if (curState == "Rename"){
btn.value = "Save";
//alert("going to save");
lbl.style.visibility = "hidden";
txt.style.visibility = "visible";
}else{
btn.value = "Rename";
lbl.style.visibility = "visible";
txt.style.visibility = "hidden";
}
}我将在“add”的click事件中实现代码，这将在db中添加条目并从html页面中删除它。
这件事对我来说很好。不过，我只想避免使用以下代码对索引号使用种子
toggleInboxEditSave(<?php echo $i?>)原因是，我计划实现ajax，并将在添加资产之后动态删除行。这使得我的javascript失败，因为索引号将不再有效，除非用户单击"add“按钮(我将添加该按钮)。
你能给出更好的方法让按钮的索引被点击吗？
提前感谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-01-10 11:30:33
尝尝这个
<tr>
<td><img src="<?php echo $newAssetsUrl.$asset->name ?>" width="50px" height="50px"/></td>
<td><span name="inboxImgName_<?php echo $asset->name?>"><?php echo $asset->name?></span>
<input type="button" name="inboxEdit_<?php echo $asset->name?>" value="Rename" onclick="alert(this.name),toggleInboxEditSave(this)"/>
<input type="text" style="visibility:hidden"
name="inboxNewImageName_<?php echo $asset->name?>" value="<?php $asset->name ?>"/>
</td>
<td><?php echo $asset->getTypeName()?></td>
<td><input type="checkbox" name="" value="Add"/>
<input type="hidden" name="imageName[]" value="<?php echo $asset->name ?>"/>
</tr>函数toggleInboxEditSave(obj){
btn = obj;
curState = btn.value;
curid = (btn.name).split("_")[1];
lbl = document.getElementsByName("inboxImgName"+curid)[0];
txt = document.getElementsByName("inboxNewImageName"+curid)[0];
if (curState == "Rename"){
btn.value = "Save";
//alert("going to save");
lbl.style.visibility = "hidden";
txt.style.visibility = "visible";
}else{
btn.value = "Rename";
lbl.style.visibility = "visible";
txt.style.visibility = "hidden";
}}
希望这对你有帮助
Stack Overflow用户
发布于 2012-01-10 11:12:54
您可以使用
<input type="button" ... onclick="alert(this.name),toggleInboxEditSave(this)"/>以及以后的
function toggleInboxEditSave(node){
btn = node;在onclick处理程序中，这个指向所有者html节点。
Stack Overflow用户
发布于 2012-01-11 08:17:53
最后我就这样做了。这里要注意的关键是
表单元素的名称是数组(t[]，c[])。这使得服务器端解析更容易，每组元素都在带有id (这里是div)的父元素中，使用getElementsByTagName访问所有子元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<?php
if (isset($_POST['Send'])){
var_dump($_POST);
}else{
?>
<form action="" method="post">
<?php
$i = 0;
while ($i<5){
?>
<div id="d_<?php echo $i?>">
<input type="text" name="t[]<?php $i?>">
<input type="checkbox" name="c[]<?php $i?>">
<input type="button"
name="b_<?php echo $i?>" value="Button<?php echo $i?>"
onclick="clicked(this)"><br/>
</div>
<?php
$i++;
}?>
<br/>
<input type="submit" name="Send"/>
</form>
<script type="text/javascript">
function clicked(btn){
idx = (btn.name).split("_")[1];
div = document.getElementById("d_"+idx);
c = div.getElementsByTagName("input");
//alert(div.getElementById("t"));
for (i=0;i<c.length;i++){
alert(c[i].name);
}
div.parentNode.removeChild(div);
}
</script>
<?php
}
?>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8802266
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号