javascript - 在 WordPress 选项页面的第一行使用 colspan 制作一行

Question

在我的 WordPress 选项页面中，为了创建我正在使用的字段 Fluent Framework 。它类似于 Meta Box 。所以他们都使用 do_settings_fields 函数，该函数生成如下代码:

<table class="form-table">
<tr>
    <th scope="row">Header 1</th>
    <td>Element 1</td>
</tr>
<tr>
    <th scope="row">Header 2</th>
    <td>Element 2</td>
</tr>
<tr>
    <th scope="row">Header 3</th>
    <td>Element 3</td>
</tr>
<tr>
    <th scope="row">Header 4</th>
    <td>Element 4</td>
</tr>
</table>

它看起来像这样:

在此表中，我想将第一行用作一行，如下所示:

我在 fields/custom_html 目录中创建了一个 javascript 文件，并使用 jQuery 隐藏范围，并将 javascript 文件排入队列，如下所示:

jQuery(document).ready(function()
{
    jQuery('th[scope="row"]').first().hide();
});

但这并不能完全解决我的问题。因为我不介意只使用一行，但是对于多行来说就很成问题了。也许我需要关闭 table 标签并再次打开一个新的 table 标签，但由于我有限的 jQuery 知识，我无法做到这一点。

Answer 1

合并两列时，您必须使用“colspan”属性，这会很有帮助，这里我分享 jquery 的代码。

$(document).ready(function(){
  var $table_head = jQuery('tr').first();
  var value = $table_head.text();
  $table_head.html('<th colspan="2">'+value+'</th>');
});