javascript - 如何根据按下的按钮调用函数以显示 div？

Question

我正在尝试生成一组 N 个按钮，一个用于数据库表的每一行，我需要显示一个 <div>通过把他的 style="display:none"至 style="display:block"单击其中一个按钮时，这 <div>将显示一个表格。

直到现在我得到了这个:

首页.PHP

    <div id="add" style="display:none;">
        <form action="#" method="post" id="form">
            <div src="close" id="close" onClick="div_hide()">X</div>
            Aggiungi
            <input type="text" name="soldi" id="campo" placeholder="Soldi">
            <a id="submit" href="">
                <button>Aggiungi</button>
            </a>
        </form>
    </div>
<?php
    while($sezioni = mysqli_fetch_assoc($sezione_sql)){     
        echo "<div class =\"sezione\">
                  <a id=\"popup\" onclick=\"div_show()\">
                      <div class=\"pulsante\">add</div>
                  </a>
              </div>";
    }
?>

Java.JS

function div_show() {
    document.getElementById('add').style.display = "block";
}

function div_hide(){
    document.getElementById('add').style.display = "none";
}

我如何在提交时调用一个函数来更新确定的数据库行，并在输入中输入按下按钮的 ID？

Answer 1

1. 通过 javascript 函数传递 db_id。
2. 在 javascript 函数中将传递的 db_id 分配给隐藏的输入表单中的字段。

传递 db_id:

while($sezioni = mysqli_fetch_assoc($sezione_sql)){  
    $db_id = $sezioni['id']; // id from database   
        echo "<div class =\"sezione\">
                  <a id=\"popup\" onclick=\"div_show($db_id )\">
                      <div class=\"pulsante\">add</div>
                  </a>
              </div>";
    }

在表单中添加一个隐藏的输入框

<input type="hidden" name="db_id" id="db_id" value="">

在 Javascript 函数中

function div_show(db_id) {
    document.getElementById('add').style.display = "block";
    document.getElementById('db_id').value = db_id;
}