1

我有一张有不同行的表。每行包含项目描述和订购项目的链接。单击链接时，我现在需要在该行下方显示一个表单。

我可以通过为每个表行使用多个表单并使用 Jqueryhide()和show()函数来完成它。但这似乎不太合乎逻辑。

有没有更好的办法。就像我可以只在一个地方创建表单并在单击链接时调用它并显示在表格行下方。

<table>
<tr>
  <td> The Item Description </td>
  <td><a href=""> Order now </td>
</tr>
<tr>
  <!-- the form should be here , it should be initially hidden but must be displayed when the link is clicked. I will have a huge number of Items -->
</tr>
</table>
4

3 回答 3

3

您可以创建一个函数来填充表单，是的。

function populate(description, quantity) {
  $('#myForm').show();
  $('#description', '#myForm').val(description);
  $('#quantity', '#myForm').val(quantity);
}

你应该将该函数绑定到 onclick 事件

$('a.order').click(function(){
  var desc = $('.description', $(this)).text(),
      quan = $('.quantity', $(this)).text();
  populate(desc,quan);
  $('#myForm').insertAfter($(this).parent()); // to 'move' the form after the <td> parent of <a>
  return false;
});
于 2013-02-19T18:37:47.620 回答
2

我的版本。我将表单存储为隐藏并将其附加到临时行：

var $form  = $('.form'),
    $table = $('.table');

$table.on('click', '.link', function(e) {
    e.preventDefault();
    $table.find('tr.temp-row').remove();
    $(this).closest('tr').after(function() {
        var $tr = $('<tr class="temp-row"><td colspan="4"></td></tr>');
        return $tr.find('td').html($form).end();
    });
});

http://jsfiddle.net/3XWUz/

于 2013-02-19T18:49:15.577 回答
0

您可以为每个订单按钮添加一个类，然后当单击其中一个按钮时，它会切换tr

<table>
<tr>
  <td> The Item Description </td>
  <td><a href="" class="order"> Order now </td>
</tr>
<tr>
  <td> The Item Description </td>
  <td><a href="" class="order"> Order now </td>
</tr>
<tr>
  <td> The Item Description </td>
  <td><a href="" class="order"> Order now </td>
</tr>
<tr>
  <td> The Item Description </td>
  <td><a href="" class="order"> Order now </td>
</tr>
<tr id="form_tr" style="display: none;">
  <td colspan="2">
  <!-- the form should be here , it should be initially hidden but must be displayed when the link is clicked. I will have a huge number of Items -->
  </td>
</tr>
</table>

jQuery：

$('.order').click(function() {
  $('#form_tr').toggle();
    return false;
});

您需要添加更多代码以使用正确的产品更新表单，但这是一般的想法。

于 2013-02-19T18:34:50.150 回答