1

さまざまな行を持つテーブルがあります。各行には、アイテムの説明とアイテムを注文するためのリンクが含まれています。リンクがクリックされたときに、その行の下にフォームを表示する必要があります。

テーブルの行ごとに複数のフォームを使用し、Jqueryhide()とshow()関数を使用することで、これを実現できました。しかし、それはあまり論理的ではないようです。

より良い方法はありますか。たとえば、1 か所だけでフォームを作成し、リンクがクリックされたときにそれを呼び出して、テーブル行の下に表示することができます。

<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

各注文ボタンにクラスを追加すると、それらのいずれかがクリックされると、fortr

<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 に答える