Javascript jQuery从表中返回超过1行的数据

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

假设我们在我的对话框中，这是我的代码：

$(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>

} }

结果是：

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>

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

    });

}

---

当前，您正在使用$'.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");
  });
}

---

你也应该分享你的HTML标记。正如我的好朋友达斯建议的那样，我已经包括了HTMLWhere's your tr in the markup？你正在寻找最接近的TR，但没有任何遗憾的DNK好友，我是在编辑我原来的职位中，应该在那里，现在看起来像$’dLgl LeNeNoT’；正在选择多个元素-具有该类的每行中都有一个元素。您需要以某种方式获取当前行的上下文-可能使用此方法获取当前按钮上下文，然后从那里遍历DOM，以使用最接近的方法获取当前tr。抱歉，Jamie，我取消了在您发布标记之前发布的答案！请参见编辑我有一个小图标，单击该图标时会弹出对话框-我已编辑了我的问题，以包含jQuery for dialog box OK，这很好，因此您可以通过类获得最接近的td。dlg_lineNote单击图标，而不是单击save按钮。通过这种方式，您将与特定的row@JamieAllen你真的需要这个对话框吗？为什么不让tr中的按钮直接执行任务？这将有助于解决这个问题。@JamieAllen看到我的编辑，未经测试，但希望你能理解我的意思好的，我明白了，但是对话框打开代码应该放在哪里？$'divdialogD.dialog'open'忽略这个问题我知道这可能像拔牙一样，但是……它起作用了！谢谢你的帮助我欠你一杯啤酒

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

    });

}

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