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>

老实说，我们将不胜感激任何帮助甚至是正确方向的指示。我真的不知道在这里做什么。我试过搜索这些论坛和谷歌，但我发现的都是关于 SQL 和数据库的东西。我只想将一个页面上的一些 HTML 表格行数据传输到另一个页面上的 HTML 表单以进行编辑。

4

2 回答 2

0

这是 AngularJS（或 KnockoutJS 或 Ember）之类的一个很好的候选。最好将表单字段绑定到模型，然后更新模型（以自动更新表单），而不是手动复制每个值。

本关于 AngularJS 的教程描述了这样一个用例。

于 2013-12-03T21:12:48.313 回答
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
});

但是，一种有效的解决方案不是复制数据，而是将行的主键保存在td数据属性之一或其中一个数据属性中，并使用它从数据库中获取记录，然后填写表格。

于 2013-11-06T17:33:01.620 回答