0

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

我知道如何使用 onclick 属性执行此操作，并将与 mySQL 数据库中的行对应的 id 号传递给 javascript 函数。我正在尝试确定如何使用Unobtrusive Javascript技术来做到这一点。

这是创建 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>
    ";
}

我遇到的问题在于客户可能有 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();         
    }
4

1 回答 1

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
    });
});
于 2012-07-21T02:00:29.017 回答