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>');
});