DHTML - индекс нажатой кнопки - PullRequest
Новая
       0

DHTML - индекс нажатой кнопки

0 голосов
/ 10 января 2012

Я только начал кодировать свою страницу управления активами, где администратор может управлять всеми активами с веб-страницы. На этой странице администратор может переименовать ресурсы и добавить активы (которые еще не добавлены в базу данных) в базу данных с помощью интерфейса формы.

Ниже приведен HTML-код в файле php 

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

    }

}

Я собираюсь реализовать код в событии click «Добавить», которое добавит запись в БД и удалит ее со страницы html.

Это работает нормально, так что для меня. Как бы то ни было, я просто хочу избежать заполнения индекса с использованием этого кода 

 toggleInboxEditSave(<?php echo $i?>)

Причина в том, что я планирую реализовать ajax, и я буду удалять строки динамически после добавления ресурсов. что делает мой javascript неудачным, потому что номера индексов больше не будут действительными, за исключением того, что пользователь нажимает кнопку «добавить» (которую я собираюсь добавить).

Можете ли вы предложить лучший способ получить индекс нажатой кнопки?

Заранее спасибо

Ответы [ 3 ]

1 голос
/ 10 января 2012

Попробуйте это 

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

}

}

Надеюсь, это поможет вам

1 голос
/ 10 января 2012

Вы можете использовать 

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

и позже 

function toggleInboxEditSave(node){
    btn = node;

внутри обработчика onclick, это указывает на узел html владельца

0 голосов
/ 11 января 2012

Наконец я сделал это так. Ключевые вещи, на которые стоит обратить внимание:

Имя элементов формы - массив (t [], c []). Это облегчает анализ на стороне сервера Каждый набор элементов находится в родительском элементе с идентификатором (вот он 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>
...