jQuery从表中返回多行数据

Question

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

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

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

}) })

结果如下：

任务= 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

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

你需要做的是识别被点击的行。您可以使用按钮上的数据属性来保存行中的值，就像现在一样（尽管在当前代码中数据属性是冗余的），但您需要将设置值的位置更改为当前时刻单击该行时（而不是对话框按钮），以便您可以轻松识别右侧行：

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

Answer 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");

    });

}