使用Jquery在表中显示表单

我有一张各行的桌子。每行包含项目说明和订购项目的链接。我现在需要在单击链接时在该行下方显示一个表单

我可以通过为每个表行使用多个表单，并使用Jquery

hide（）

和

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>

项目描述
现在点菜

您可以向每个订单按钮添加一个类，然后单击其中一个按钮时，它将切换for

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>

---

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

您可以向每个订单按钮添加一个类，然后单击其中一个按钮时，它将切换for

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>

---

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

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

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;
});

$（'a.order'）。单击（函数（）{
var desc=$（'.description'，$（this））.text（），
quan=$（'.quantity'，$（this））.text（）；
填充（desc，quan）；
$（'#myForm'）.insertAfter（$（this.parent（））；//将窗体“移动”到的父级之后
返回false；
});

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

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;
});

$（'a.order'）。单击（函数（）{
var desc=$（'.description'，$（this））.text（），
quan=$（'.quantity'，$（this））.text（）；
填充（desc，quan）；
$（'#myForm'）.insertAfter（$（this.parent（））；//将窗体“移动”到的父级之后
返回false；
});

我的版本。我将表单隐藏起来并将其附加到临时行：

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();
    });
});

var$form=$（'.form'），
$table=$（'.table'）；
$table.on（'click'，'.link'，函数（e）{
e、 预防默认值（）；
$table.find（'tr.temp-row'）.remove（）；
$（this）.最近（'tr'）。在（function（）之后{
var$tr=$（''）；
返回$tr.find（'td'）.html（$form.end（）；
});
});

---

我的版本。我将表单隐藏起来并将其附加到临时行：

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();
    });
});

var$form=$（'.form'），
$table=$（'.table'）；
$table.on（'click'，'.link'，函数（e）{
e、 预防默认值（）；
$table.find（'tr.temp-row'）.remove（）；
$（this）.最近（'tr'）。在（function（）之后{
var$tr=$（''）；
返回$tr.find（'td'）.html（$form.end（）；
});
});

---

---

他希望在每个选项下显示表单，而不仅仅是在表的末尾。您的代码将只在表的末尾，最后一行之后显示表单。当点击“立即订购”按钮时，我需要它在每一行的下方。啊，我误读了这个问题。我以为您要求在一个位置显示表单，无论您单击哪个链接。他希望在每个选项下显示表单，而不仅仅是在表的末尾。您的代码将只在表的末尾，最后一行之后显示表单。当点击“立即订购”按钮时，我需要它在每一行的下方。啊，我误读了这个问题。我以为无论单击哪个链接，您都要求在一个位置显示表单。包含表单的行是否总是直接位于包含项目描述和订单链接的行之后？否。。当单击ordernow链接时，它应该在第一行的正下方，我看不出有任何问题@沙尼马尔。。正如我在问题中所说的，我可以按照你的方式来做，使用每行下面的表格。但我不想这样。我想在一个地方创建表单，然后使用链接在每一行下面调用它。包含表单的行是否总是直接位于包含项目描述和立即订购链接的行之后？否。。当单击ordernow链接时，它应该在第一行的正下方，我看不出有任何问题@沙尼马尔。。正如我在问题中所说的，我可以按照你的方式来做，使用每行下面的表格。但我不想这样。我想在一个地方创建表单，然后使用链接在每行下面调用它。不要忘记a

返回false在点击功能中。不错，比我的干净多了！你的也很不错：）不错，比我的干净多了！你的也很不错：）