Php JS/jQuery中可编辑字段的数量可变

我试图做的是使用php从数据库中提取可变数量的记录。我想让用户能够点击文本，它会将文本切换为输入框，并在提交时更新数据库

我知道如何使用onclick属性实现这一点，并向javascript函数传递与mySQL数据库中的行对应的id号。我正在尝试确定如何使用技术来实现这一点

下面是创建div的代码部分，当用户单击区域、帐号、dv或地址字段时，它将切换出输入框的文本，如我前面所说

while($row = mysql_fetch_array($query)) {
    $business_name = $row['business_name'];
    $resource_id = $row['resource_id'];
    $totaldv += $row['dv'];
    if(!in_array($row['zone'], $zoneArray)) {
        $zones .= $row['zone'] . " ";
        array_push($zoneArray, $row['zone']);
    }
    $account_numbers .= "
    <div>". $row['zone'] . "</div>
    <div>" .  $row['account_number'] . "</div>
    <div>" .  number_format($row['dv']) . " kW</div>
    <div>" . $row['street_address'] . " " . $row['city'] . ", " . $row['state'] . "</div>
    ";
}

while（$row=mysql\u fetch\u array（$query））{
$business_name=$row['business_name']；
$resource_id=$row['resource_id']；
$totaldv+=$row['dv']；
if（！in_数组（$row['zone']，$zoneArray））{
$zones.=$row['zone']。“”；
阵列推送（$zoneArray，$row['zone']）；
}
$account_number.=”
“$row['zone']”
“$row['账号']”
“.number_格式（$row['dv']）。”千瓦
“$row['street_address']。”.“$row['city']。”，“$row['state']”
";
}

我遇到的问题在于，一个客户可能有1个帐户，或83个帐户，我需要能够切换出输入框的正确文本，并将行的id从数据库传递到表单。我在想也许用一个类来应用于某些领域

我以前做过类似的事情，但它始终是静态的输入，因此我能够隐藏文本并显示加载页面时生成的输入框。与此类似的东西（尽管不是不引人注目的）

$content.=”
$rankImages
“$itemArray[$i]”
";
函数editItem（行数）{
$（“#text”+line_num）.hide（）；
$（“#”+行数+“输入”）.show（）；
}

我将使用

数据-*

属性，然后使用jQuery函数访问该数据。一个简短但外观相似的HTML外观示例：

<div class="editable-row" data-row-id="1">
    <span class="uneditable">row one</span>
    <input type="text" value="row one" />
</div>
<div class="editable-row" data-row-id="2">
    <span class="uneditable">row two</span>
    <input type="text" value="row two" />
</div>
<div class="editable-row" data-row-id="3">
    <span class="uneditable">row three</span>
    <input type="text" value="row three" />
</div>
<div class="editable-row" data-row-id="4">
    <span class="uneditable">row four</span>
    <input type="text" value="row four" />
</div>

---

谢谢，我最终实现了类似的功能——它似乎工作得很好

<div class="editable-row" data-row-id="1">
    <span class="uneditable">row one</span>
    <input type="text" value="row one" />
</div>
<div class="editable-row" data-row-id="2">
    <span class="uneditable">row two</span>
    <input type="text" value="row two" />
</div>
<div class="editable-row" data-row-id="3">
    <span class="uneditable">row three</span>
    <input type="text" value="row three" />
</div>
<div class="editable-row" data-row-id="4">
    <span class="uneditable">row four</span>
    <input type="text" value="row four" />
</div>

$(document).ready(function () {
    $(".editable-row").on("click", function () {
        var $this = $(this),
            rowId = parseInt($this.data("rowId"), 10);

        $this.find("input").show();
        $this.find(".uneditable").hide();

        // do something with rowId
    });
});