jQuery从表中带回多于一行的数据

时间:2018-06-20 14:05:50

标签: javascript jquery ajax

我有一张桌子,目前有2行。在这些行旁边,我有一个图标,单击该图标会弹出一个对话框,在此对话框中是一个按钮,当按下该按钮时,它将运行一个将所选项目复制到另一个文件的功能

所以假装我们在我的对话框中,这是我的代码:

$(document).ready(function() {
  $(function() {
    $("#save").on("click", saveNote);
  });
})

这将调用以下函数:

function saveNote() {

    var OpenNote = $('.dlg_lineNote');
    var row = jQuery(OpenNote.closest("tr"));
    var cpyItem = row.find(".IPROD").text();
    $('div#dialogD').data('dataIPROD', cpyItem);

    jQuery.ajax({
        url: 'B2BUNV400.PGM',
        type: 'POST',
        data: {
            task: 'copyItem',
            cpyItem: cpyItem
        },
    }).done(function(message) {
        $("#saveComment").html("Saved");

    });

}

我的表有两行,其中包含以下项目:

第1行:97940G96058445V 第2行:32225316058445

这是html:

<tr class="altcol1">   
<input type="hidden" name="IPRODa" value="97940G96058445V" />

  <td class="" align="center"><span><a class="icon-sitemap split dlg_lineNote" href="#" id="dlg_lineNote" title="Copy item to LXF files" href=""></a></span></td> 
  <td align="center" class="IPROD">97940G96058445V</td>
  <td class="text" align="center">PA</td>
  <td class="text" align="center">F7940</td>
  <td class="text" align="center">G9</td>
  <td class="text" align="center">58</td>
  <td class="text" align="center">44</td>
  <td class="text" align="center">5</td>
  <td class="text num" align="center">6.000</td>
</tr>

<tr class="altcol2">   
<input type="hidden" name="IPRODa" value="32253216058445" />

  <td class="" align="center"><span><a class="icon-sitemap split dlg_lineNote" href="#" id="dlg_lineNote" title="Copy item to LXF files" href=""></a></span></td> 
  <td align="center" class="IPROD">32253216058445</td>
  <td class="text" align="center">PA</td>
  <td class="text" align="center">F2253</td>
  <td class="text" align="center">21</td>
  <td class="text" align="center">58</td>
  <td class="text" align="center">44</td>
  <td class="text" align="center">5</td>
  <td class="text num" align="center">6.000</td>
</tr>

这是对话框的html:

<div id="dialogD">


<button id="save">Copy Item</button>



</div> 

这是jQuery,我必须打开所说的对话框:

  $(document).ready(function() {
    $('div#dialogD').dialog({ autoOpen: false, height: 250, width: 300 })
    $('.dlg_lineNote').click(function(){

    var OpenNote = $(this); 
    var row = jQuery(OpenNote.closest("tr")); 
    var cpyItem = row.find(".IPROD").text();    

        $('div#dialogD').data('dataIPROD',cpyItem);

            jQuery.ajax(
        {
            url: 'B2BUNV400.PGM', 
            type: 'POST',
            data: {task: 'copyItem', Item: cpyItem},                
        }).done(function(message)
            {
            $("#notetext").val(message);
            $('div#dialogD').dialog('open');    
            }); 

            $(document).ready(function() {
        $(function() {
            $("#save").on("click", saveNote);
});     

})             })

结果:

task = copyItem&cpyItem = 97940G96058445V32253216058445

请注意,cpyItem实际上是在检索表中的两个项目记录,而不是我在打开对话框时单击的项目

我选择“保存”的任何项目,它都会拉动两行...

我希望这是有道理的

提前感谢任何帮助

注意:我不经常使用jquery

编辑:这是我更新的代码

    <script>
        jQuery(function() {
            jQuery("input:submit, input[type=button], input[type=submit], button, 
          .button").button();
        });

         $(document).ready(function() {
         $('div#dialogD').dialog({ autoOpen: false, height: 250, width: 300 })
    $('.dlg_lineNote').click(function(){

        var OpenNote = $(this); 
        var row = jQuery(OpenNote.closest("tr")); 
        var cpyItem = row.find(".IPROD").text();    

            $('div#dialogD').data('dataIPROD',cpyItem);

                jQuery.ajax(
            {
                url: 'B2BUNV400.PGM', 
                type: 'POST',
                data: {task: 'copyItem', Item: cpyItem},                
            }).done(function(message)
                {
                $("#notetext").val(message);
                $('div#dialogD').dialog('open');    
                }); 


})

//  var item = row.find(".IPROD").text();;

            //  $("#save").click({cpyItem: item} ,saveNote);


$('.dlg_lineNote').on('click', function() {
    var row = $(this).closest("tr");
    var cpyItem = row.find(".IPROD").text();
    $('div#dialogD').data('dataIPROD', cpyItem);
});

function saveNote() {
  jQuery.ajax({
    url: 'B2BUNV400.PGM',
    type: 'POST',
    data: {
        task: 'copyItem',
        cpyItem: $('div#dialogD').data('dataIPROD') //get the value of the last selected row
    },
  }).done(function(message) {
    $("#saveComment").html("Saved");
  });
}   
    })
    </script>

2 个答案:

答案 0 :(得分:2)

您的OpenNote变量在按类选择时指向两个对象,并且该类有两个td元素。

您需要选择与类别td最接近的.dlg_lineNote与选择保存的项目。

如何选择要保存的项目?我知道您单击了对话框中的“保存”按钮,但是需要一种将其与特定行相关联的方式

您可以这样做:

var row;
$('.dlg_lineNote').on('click', function() {
    row = $(this).closest("tr");
});

function saveNote() {
    var cpyItem = row.find(".IPROD").text();
    $('div#dialogD').data('dataIPROD', cpyItem);

    jQuery.ajax({
        url: 'B2BUNV400.PGM',
        type: 'POST',
        data: {
            task: 'copyItem',
            cpyItem: cpyItem
        },
    }).done(function(message) {
        $("#saveComment").html("Saved");

    });

}

答案 1 :(得分:0)

当前,您正在使用$('.dlg_lineNote');从每一行中选择字段。

您需要做的是确定单击的行。您可以像现在一样使用按钮上的数据属性来保存行中的值(尽管在当前代码中data属性是多余的),但是您需要更改将值设置为当前位置的位置单击该行时(而不是对话框按钮),因此您可以轻松地确定右行:

$(document).ready(function() {

  $('div#dialogD').dialog({ autoOpen: false, height: 250, width: 300 });

  $('.dlg_lineNote').on('click', function() {

    var row = $(this).closest("tr"); //use "this" to get the exact element clicked on. From here we can get to the exact tr, instead of selecting all of them at once.
    var cpyItem = row.find(".IPROD").text();
    $('div#dialogD').data('dataIPROD', cpyItem);
  });

  $("#save").click(saveNote);
});

function saveNote() {
  jQuery.ajax({
    url: 'B2BUNV400.PGM',
    type: 'POST',
    data: {
        task: 'copyItem',
        cpyItem: $('div#dialogD').data('dataIPROD'); //get the value of the last selected row
    },
  }).done(function(message) {
    $("#saveComment").html("Saved");
  });
}