javascript - DHTML - 单击按钮的索引

Question

我刚刚开始编码我的 Assets 管理页面，管理员可以在其中管理网页上的所有 Assets 。在此页面中，管理员可以使用表单界面重命名 Assets 并将 Assets (尚未添加到数据库中)添加到数据库中。

下面是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”的点击事件中实现代码，该事件将在数据库中添加条目并将其从 html 页面中删除。

这对我来说工作得很好。然而，我只是想避免使用此代码播种索引号

 toggleInboxEditSave(<?php echo $i?>)

原因是，我计划实现ajax，并且在添加资源后动态删除行。这使得我的 JavaScript 失败，因为索引号将不再有效，除非用户单击“添加”按钮(我将添加该按钮)。

您能建议任何更好的方法来获取被单击按钮的索引吗？

提前致谢

Answer 1

试试这个

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

}

}

希望这对你有帮助