insertafter 数据卡在其上方的单元格中

如何解决insertafter 数据卡在其上方的单元格中

我遇到了一个问题，我的 .insertafter 数据显示卡在其父数据的一个单元格内，尽管它是自己的一行，有自己的 div。 （请看下图）

抓取 insertafter 数据的 AJAX 代码如下：

function options(id){           
        jQuery.ajax({
        type: 'post',url: my_ajax.ajax_url,data: {             action: 'options_function',cid : id
        },success: function (data) {
var $newElement=jQuery("<div>",{id:'ideal_option',html:data}
)
$newElement.insertAfter(jQuery('[data-id="' + id + '"]').closest('tr'))

这是表格本身的 PHP 和 HTML。

echo "<table id ='ideal_option' >"; 
        echo '<tr style="display:inline-table; width:100%">';
        echo '<th>' . "Table". '</th>','<th>' . "Size". '</th>','<th>' . "Name". '</th>','<th>' . "Party". '</th>';
        echo '</tr>';
        echo '<tr>';
foreach($check_availability as $available){ 
    $tbl_id=$available->id;
    $foh_nmbr=$available->FOH_Number;
    $tbl_type=$available->Type;
    echo '<tr>';
    echo '<td>' . $foh_nmbr . '</td>';
    echo '<td>' . $tbl_type . '</td>';
    echo("<td><select>");
foreach($Staff_On_Duty as $person){         
    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($tbl_id,$cid)'><i class='icon fas fa-globe'></i></button>" . '</td>'; 
echo '</tr>';}
echo '</table>';

我曾尝试向表格添加样式，例如宽度：100% 和显示（字面上都尝试了它们），但没有将整个表格从其上方的单元格中移除。

编辑 1 使用

的建议

jQuery('[data-id="' + id + '"]').closest('tr').find('td:last').append($newElement) 它将附加数据放在旁边而不是下面。我已经尝试了 tbody 上的所有显示类型，但没有将数据放在行下。

编辑 2 使用这段代码时，结果是

var $newTR = jQuery("<tr>")
var $newTD = jQuery("<td>",html:data,colspan:4}) // I assume 4 columns
$newTR.append($newTD)

// Then here,.insertAfter() is the right method
$newTR.insertAfter(jQuery('[data-id="' + id + '"]'))

编辑 3 代码：

var $newElement=jQuery("<tr>",html:data}
)
$newElement.insertAfter(jQuery('[data-id="' + id + '"]').closest('tr'))

提供：

解决方法

jQuery .insertAfter() 在作为参数提供的目标之后插入一个元素。

所以这里的 $newElement.insertAfter(jQuery('[data-id="' + id + '"]').closest('tr')) 是在最近的 <dvi> 元素的结束标记之后插入一个 tr 元素。

即使您修正了 dvi 明显的错字...

您将在 <div> 中插入一个 <table> 元素，因此是无效的 HTML。

我想你应该寻找 .append() 方法来代替...

将一个 div 附加到 td 的最后一个 tr：

jQuery('[data-id="' + id + '"]').closest('tr').find('td:last').append($newElement)

---

编辑基于下面的评论。

这很管用。它将新的 div（是错别字）放在行旁边而不是下面。

如果您想在下面多加一行，那么在 td 内创建一个 tr！

试试这个：

var $newTR = jQuery("<tr>")
var $newTD = jQuery("<td>",{id:'ideal_option',html:data,colspan:4}) // I assume 4 columns
$newTR.append($newTD)

// Then here,.insertAfter() is the right method
$newTR.insertAfter(jQuery('[data-id="' + id + '"]'))