Question

我刚开始编写资产管理页面，管理员可以从网页管理所有资产。在此页面中，管理员可以使用表单界面重命名资产并将资产（尚未添加到数据库中）添加到数据库。

下面是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";

    }

}

我将在“添加”的点击事件中实现代码，该事件将在数据库中添加条目并将其从html页面中删除。

这对我来说很好。但是，我只想使用此代码

来避免索引号的种子

 toggleInboxEditSave(<?php echo $i?>)

原因是，我打算实现ajax，我会在添加资源后动态删除行。这使我的javascript失败，因为索引号不再有效，除非用户点击“添加”按钮（我将添加）。

您能否建议更好地获取点击按钮的索引？

提前致谢

Answer 1

您可以使用

<input type="button" ... onclick="alert(this.name),toggleInboxEditSave(this)"/>

以后

function toggleInboxEditSave(node){
    btn = node;

在onclick处理程序内部， this 指向所有者html节点

Answer 2

试试这个

<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>

function 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";

}

}

希望这有助于你

Answer 3

最后我这样做了。这里要注意的关键事项是

表单元素的名称是数组（t []，c []）。这使得服务器端解析更容易每组元素都在一个带有id的父元素中（这里是div）在JS中，使用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>

DHTML - 单击按钮的索引

3 个答案: