0

私がやろうとしているのは、phpを使用してデータベースから可変数のレコードをプルすることです。ユーザーがテキストをクリックできるようにしたいのですが、テキストが入力ボックスに切り替わり、送信時にデータベースが更新されます。

onclick属性を使用してこれを行う方法を認識しており、javascript関数にmySQLデータベースの行に対応するID番号を渡します。控えめなJavascriptの手法を使用してこれを行う方法を決定しようとしています。

これがdivを作成するコードの部分です。ユーザーがzone、account_number、dv、またはaddressフィールドをクリックすると、上記のように入力ボックスのテキストが切り替わります。 

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 に答える