我要做的是使用php从数据库中提取可变数量的记录。我想让用户能够点击文本,它会将文本切换为输入框,并在提交时更新数据库。
我知道如何使用onclick属性执行此操作,并将javascript函数传递给与mySQL数据库中的行对应的id号。我正在尝试使用Unobstrusive Javascript技术确定如何执行此操作。
以下是创建div的代码部分,当用户点击zone,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();
}
答案 0 :(得分:0)
我要采用的方法是使用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
});
});