2

フォーム/テーブルを持つページがあります。

行の最後にあるボタンまたは行自体をクリックして、このデータを別の HTML ページの別のフォームにコピーして、編集できるようにしたいと考えています。

おそらくJQueryと関係があることは知っていますが、それについての経験はほとんどありません。

詳細が必要な場合は、喜んで提供します。

編集：

現在の外観は次のとおりです (SimpleXML を使用して xml ファイルからデータを取得したテーブルです)。

<form name ="editEvent" method="post" action="editEvent.php">
    <table border="1">
        <tr bgcolor="#FFA500">
            <th>ID #</th>
            <th>Name</th>
            <th>Start Time</th>
            <th>End Time</th>
            <th>Category</th>
            <th>Description</th>
            <th>Location</th>
            <th>Picture Path</th>
            <th>Edit/Delete</th>
        </tr>   <tr>
          <td>1
          <td>Climbing</td>
          <td>09:00</td>
          <td>09:30</td>
          <td>Physical</td>
          <td>Description of what is going on</td>
          <td>where it is</td>
          <td>a photo link</td>
          <td><input type="submit" name="edit" class ="box" value="Edit/Delete"/></td>
      </tr> 
    </table>

次のような表にまとめたいと思います。

<tr>
        <td><input type="text" name="name" placeholder="Enter new event name..."/></td>
        <td><input type="text" name="time" placeholder="Enter event start time..."/></td>
        <td><input type="text" name="endtime" placeholder="Enter event end time..."/></td>
        <td><input type="text" name="category"/></td>
        <td><input type="text" name="description" placeholder="Enter a description of the event..."/></td>
        <td><input type="text" name="loc"/></td>
        <td><input type="text" name="picturePath" placeholder="Enter link to picture..."/></td>
        <td><input type="submit" name="create" class="box" value="Create"/></td>
    </tr>

正直なところ、正しい方向への助けや指針さえあれば幸いです。ここで何をすべきか本当にわかりません。これらのフォーラムと Google を検索してみましたが、SQL とデータベースに関するものしか見つかりませんでした。あるページの HTML テーブル行データを別のページの HTML フォームに転送して編集したいだけです。

4

2 に答える 2

0

クラス名などの列を識別する方法がいくつか必要です。たとえば、行<td class="name">Climbing</td>にイベント ハンドラーをアタッチし、tdすべてのデータを取得してフォームに入力することができます。

$("td").on('click', function() {
   var tr = $(this).parent('tr');
   var name = tr.find(".name").text();
   // Grab other values like this

   // and later populate the form
});

ただし、データをコピーする代わりに、データ属性の 1 つまたはデータ属性の 1 つに行の主キーを保持し、tdそれを使用してデータベースからレコードを取得し、フォームに入力するのが効率的な解決策です。

于 2013-11-06T17:33:01.620 に答える
0

これは、AngularJS (または KnockoutJS または Ember) のようなものの良い候補です。各値を手動でコピーするよりも、フォーム フィールドをモデルにバインドしてからモデルを更新する (フォームを自動的に更新する) 方が適切です。

AngularJS に関するこのチュートリアルでは、そのようなユース ケースについて説明します。

于 2013-12-03T21:12:48.313 に答える