jquery 在现有表下追加表并链接到该行记录的 id

Posted 2023-03-11

【中文标题】jquery 在现有表下追加表并链接到该行记录的 id

【英文标题】：jquery append table under existing table and link to id of that rowrecord

【发布时间】：2021-04-06 09:37:16

【问题描述】：

我正在尝试获取一个包含一些结果的表，并将其附加到 AJAX Jquery 提供的按钮单击上的另一个表行。 目前的功能代码是：

function options(id)
  jQuery.ajax(
    type: 'post',
    url: my_ajax.ajax_url,
    data: 
      action: 'options_function',
      cid : id
    ,      
    success: function (data) 
    var parentEl = jQuery('#list-table').parent();
    jQuery('#list-table').append('#ideal_option').html(data).show();.show();
    
  );   

#list-table 有许多行，每行都有一个按钮，然后单击时触发选项功能。

该功能成功时，我想附加附加表结果#ideal_option。我想确保 #ideal-option 被附加到我单击按钮所在的行，而不是 #list-table 表的末尾。

上面用新表替换了初始表，而不是附加它。它也没有与它应该与之配对的行。

我该如何改变它并使它正确？

带有 HTML 的完整表格代码强文本****

echo "<table id ='ideal_option'>";  

foreach($check_availability as $available) 
    $id=$available->id;
    $foh_nmbr=$available->FOH_Number;
    $tl_type=$available->Type;
    $sf_name=$available->Staff_First_Name;
    $sl_name=$available->Staff_Last_Name;
    echo '<tr>';
    echo '<td>' . $foh_nmbr . '</td>';
    echo '<td>' . $tl_type . '</td>';
    echo("<td><select>");
foreach($Staff_On_Duty as $person)         
    $sf_name_option=$person->Staff_First_Name; 
    $sl_name_option=$person->Staff_Last_Name;
    echo("<option value = $sf_name_option&nbsp;$sl_name_option");
    if (($sf_name_option == $sf_name) && ($sl_name_option == $sl_name)) echo (" selected");
    echo(">$sf_name_option&nbsp;$sl_name_option</option>"); 

echo("</select></td>");
    
    echo '<td>' . "<button id='party' class='button ' onclick='party($id, $cid)'><i class='icon fas fa-globe'></i></button>" . '</td>'; 
echo '</tr>';
echo '</table>';

初始表格的 HTML

<table width='100%' border='0' style='display:inline-table' id='list-header' class='list-table-header'>     <th>Name</th>           <th>Email Address</th>      <th>Time Stamp</th>     <th>Status</th>     <th>Wait</th>       <th>Action</th> <th>Notify</th>     <tbody id='list-table'>     </tbody>

【问题讨论】：

我怀疑里面有一些非唯一的ID...你能发布HTML吗？

添加到初始帖子

【参考方案1】：

第一部分，ideal_option 似乎没有在标记中的任何地方指定，所以我猜它在其他地方并且默认隐藏。在这种情况下，您的链接可能是错误的。

jQuery('#list-table').append('#ideal_option').html(data).show();

应该是

jQuery('#list-table').append( jQuery('#ideal_option').html(data) ).show();

第二部分，针对您点击的行，您需要处理点击事件以及要发送的数据。我建议使用 jQuery 的绑定来处理这个问题，而不是使用原始的 onclick，通过数据属性传递参数：

jQuery(document).on('click','button.button',function party(e)
  var t = e.currentTarget; // this represents the button
  var id = jQuery(t).data('id'); // get data from the button
  var cid = jQuery(t).data('cid');
  jQuery(t).closest('td').append('You clicked here with id '+ id +' and cid '+ cid);
  options(id, cid, t); // we could pass in the target or the event here
);

我很可能误解了您的 JS 函数中的关系，但是 Here's a jsFiddle 的近似值是 (1) 将数据附加到表的 end，以及 (2) 定位单击按钮的 <td>。

【讨论】：

您好，非常感谢。所以为了保持故障排除的做法，我刚刚移动了 jQuery('#list-table').append( jQuery('#ideal_option').html(data) ).show(); 的第一部分但它没有做任何事情，我不知道为什么。我对照这个例子检查了几次，实际上复制并粘贴了它。什么都没有。以前我可以让它附加，但它会替换数据。 Ideal_option 是 HTML 代码中的表格。取决于你打开它的时间，大约一个小时前，当我意识到我之前没有这样做时，我将它添加到帖子中

好的，所以我现在可以通过实际数据了。我使用了更简单的东西——jQuery('tbody#list-table').append(data);。出于某种原因，我无法让第一个示例工作，但我很感激。但是，在使用您的第二个示例时，我也无法使其正常工作。我在 CID 和 Id 上遇到不明错误，顺便说一句