我要做的是使用php从数据库中提取可变数量的记录。我想让用户能够点击文本，它会将文本切换为输入框，并在提交时更新数据库。
我知道如何使用onclick属性，并向javascript函数传递与mySQL数据库中的行相对应的id号。我正在尝试确定如何使用Unobstrusive Javascript技术来实现这一点。
这是创建div的代码部分，当用户单击区域、account_number、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>
";
}
我遇到的问题在于，一个客户可能有1个或83个帐户，我需要能够切换出输入框的正确文本，并将行的id从数据库传递到表单。我想也许可以将类应用于某些字段？
我以前做过这样的事情，但它总是一个静态的输入#，所以我能够隐藏文本并显示加载页面时生成的输入框。
$content .= "
<tr>
<td width=35><IMG SRC=images/$i.png height=20></td>
<td width=35 id=rank".$i.">$rankImages</td>
<td width=380>
<span id=text".$i." style='"cursor:pointer;'" onclick='"editItem($i);'">".$itemArray[$i]."</span>
<span id=$i"."input>
<input id=$i type=text value=".$itemArray[$i].">
<IMG SRC=images/save.png style='"cursor:pointer;'" onclick='"saveItem($i);'">
<IMG SRC=images/cancel.png style='"cursor:pointer;'" onclick='"cancelEdit($i);'">
</span>
</td>
</tr>";
function editItem(line_num) {
$("#text" + line_num).hide();
$("#" + line_num + "input").show();
}
我将使用data-*属性，然后使用jQuery的.data()函数访问该数据。一个较短但外观相似的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>
你的JavaScript看起来是这样的：
$(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
});
});