在 Wordpress 选项页面的第一行使用 colspan 制作一行

Question

在我的 WordPress 选项页面中，我使用 Fluent Framework. It is similar to 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>

看起来像这样：

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

在 Wordpress 选项页面的第一行使用 colspan 制作一行

Making one row with colspan first row of the Wordpress options page

javascript

jquery

wordpress

html-table

meta-boxes