Question

我有一个包含表格/表格的页面。

我希望能够单击行末的按钮或行本身，并将该数据复制到另一个表单上的另一个表单中，然后可以对其进行编辑。

我知道它可能与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表格进行编辑。

Answer 1

您需要在类名称等列上使用一些标识方法。例如：<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之一或其中一个数据属性上，并使用它来从数据库中获取记录，而不是复制数据。然后填写表格。

Answer 2

对于像AngularJS（或KnockoutJS或Ember）这样的东西来说，这是一个很好的选择。最好将表单字段绑定到模型，然后更新模型（以自动更新表单），而不是手动复制每个值。

AngularJS上的

This tutorial描述了这样一个用例。

将表行数据复制到html中的表单

2 个答案: