Question

我有一个包含数据的表，当您单击某些项目时，会出现一个jquery ui对话框，以确保您要添加该特定项目。我的问题是如何在对话框中单击“是”后实际添加项目（只是项目名称）？

我的html只是一个表（它必须是一个表），左侧有一个按钮，然后是第二列中的名称和第三列中的信息，所以

<tr>
    <td><button class="itemButton"></td>
    <td> item1 </td>
    <td> description </td>
</tr>

我希望将它添加到名为cart

的div中

<div id="cart"></div>

这是我的jquery

$(document).ready(function () {
    var dialogDiv = $('#dialog');

    $('.itemButton').click(function () {
        dialogDiv.dialog('open');
    });

     dialogDiv.dialog({
         autoOpen: false,
         modal: true,
         buttons: {
            'Add': function () {
                 HELP HERE!!!!!!
                 dialogDiv.dialog('close');
             },
            'Cancel': function (){
                dialogDiv.dialog('close');
          }
      }
   });
});

对于其他不需要弹出窗口的人，我有这个用于我的jquery

$('.add').click(function(){
    $(this).parent().next().clone().appendTo('p').after('<br>');
});

并且工作正常。

谢谢。

Answer 1

一种方法是mark单击一个类的按钮，并在确认后使用该类将正确的行移动到cart。

此示例在添加到购物车时将Add Button留给了权宜之计。

编辑：更新以仅移动项目名称[单元格2]

＆＃13;

$(document).ready(function() {
  var dialogDiv = $('#dialog');

  $('.itemButton').click(function() {
    $('.itemButton.debating').removeClass("debating"); //remove any old marker
    $(this).addClass("debating"); //mark this button
    dialogDiv.dialog('open');
  });

  dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      'Add': function() {
        $("<div>").text($('.itemButton.debating').closest("tr").find("td:nth-child(2)").text()).appendTo($("#cart")); //move the marked text
        dialogDiv.dialog('close');
      },
      'Cancel': function() {
        dialogDiv.dialog('close');
      }
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link type='text/css' href='https://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css' rel='stylesheet' />
<div id='dialog'>Are you sure?</div>
<table>
  <tr>
    <td><button class="itemButton">Add</button></td>
    <td> item1 </td>
    <td> description </td>
  </tr>
  <tr>
    <td><button class="itemButton">Add</button></td>
    <td> item2 </td>
    <td> description 2</td>
  </tr>
  <tr>
    <td><button class="itemButton">Add</button></td>
    <td> item3 </td>
    <td> description 3</td>
  </tr>
</table>

<div id="cart" style='background-color: red;'></div>

＆＃13;

Answer 2

不完全确定为什么你想用按钮移动购物车中的整行，所有这些都是在购物车中只添加商品信息的DIV的答案。 Here's a fiddle

$(document).ready(function () {
    var dialogDiv = $('#dialog'),
    itemName = '';

    $('.itemButton').click(function () {
        dialogDiv.dialog('open');
        itemName = $(this).closest('tr').find('td:nth-child(2)').text();
    });

     dialogDiv.dialog({
         autoOpen: false,
         modal: true,
         buttons: {
            'Add': function () {
                $('<div>' + itemName + '</div>').appendTo('#cart');
                 dialogDiv.dialog('close');
             },
            'Cancel': function (){
                dialogDiv.dialog('close');
          }
      }
    });
});

您还需要修复该按钮的标记。它缺少它的结束标记

<button class="itemButton">Add to Cart</button>

在jquery ui对话框后添加到div

2 个答案: