javascript - jQuery 从表中带回超过 1 行的数据

Question

我有一个表，目前有 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:32253216058445

这是 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>

Answer 1

您的 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");

    });

}