如何多次自定义和使用同一个 html 表格？

Posted 2023-02-24

【中文标题】如何多次自定义和使用同一个 html 表格？

【英文标题】：How can I customize and use the same html table multiple times?

【发布时间】：2018-08-05 11:14:46

【问题描述】：

在我的一个页面中，我有几张桌子。这些表格具有相同的结构，但颜色和显示的数据不同。

示例表可能如下所示：

<div class="container reusable-table">
    <h4 class="table_title"> table_title </h4>
    % for item in items %
        <div class="container row">
            <div class="container col">
                <h4> item.date </h4>
            </div>
            <div class="container col">
                <h4> item.time </h4>
            </div>
            <div class="container col">
                <h4> item.title </h4>
            </div>
            <div class="container col">
                <h4> item.description </h4>
            </div>
            <div class="container col">
                <h4> item.price </h4>
            </div>
        </div>
    % endfor %
</div>

我的选择之一是每次重复表格的 html 和 css 代码。这样我就冒着错误和大量重复代码的风险。

在我看来，我需要找到一种替代方法：

html 元素，例如table_title 数据相关元素，如% for item in items % 颜色

根据 cmets 和下面的答案，以及 Assign variables to child template in % include % tag Django，您可以将 html 元素和数据替换为以下内容：

% include "new_table.html" with table_title="A Title" and items=new_items %

剩下的是颜色方面，或者更好的说法是 css 方面。

我正在寻找一种方法来提高效率。

【问题讨论】：

includes 可能会帮助您做到这一点。所以你可以做类似% include 'my_table.html' with table_title='foo' items=some_items %

@sytech 传递 table_title="foo" 工作正常。如果我的视图返回context["these_items"] 和context["other_items"]，我不能传递items=other_items 之类的东西，以便在for 循环中使用。

我不确定你的意思。当您包含my_table.html 时，它可以使用当前上下文中的名称，或者您可以通过说with keyword=value 覆盖它们——您甚至可以通过使用only 关键字来阻止在完全呈现包含的模板时使用父上下文名称。因此，即使您有名称冲突或使用不同的名称，它也很灵活。如果您使用 include 尝试了一些特定的操作但不起作用，您可以用这些详细信息更新您的问题吗？

在包含的 html 文件中，您可以将 <h4 class="table_title">Table Title</h4> 替换为 <h4 class="table_title"> table_title </h4> 并执行 % include 'my_table.html' with table_title='foo'。你将如何替换% for item in items %，你能做类似 % for item in items % 的事情吗？本质上，您如何在% include % 中传递items 以用变量替换？

你是对的，我在包含的 html 中有错误。

【参考方案1】：

您可以将您的表格设置为 html sn-p 模板，您可以将其包含在其他模板中以使此类事情易于管理。见the docs on include。

假设你有item_table.html。

<div class="container reusable-table">
    <h4 class="table_title"> table_title </h4>
    % for item in items %
        <div class="container row">
            <div class="container col">
                <h4> item.date </h4>
            </div>
            <div class="container col">
                <h4> item.time </h4>
            </div>
            <div class="container col">
                <h4> item.title </h4>
            </div>
            <div class="container col">
                <h4> item.description </h4>
            </div>
            <div class="container col">
                <h4> item.price </h4>
            </div>
        </div>
    % endfor %
</div>

假设您有一个视图，它为模板提供项目列表，例如

# ...
return render('some_template.html', context=dict(some_items=something))

在您的some_template.html 中，您可以包含 item_table.html 并为其传递适当的值。例如，项目列表some_items 可以成为包含模板中的items 变量。

% include "item_table.html" with table_title="My Title" items=some_items %

【参考方案2】：

您可以为表格创建一个 HTML 文件，使用 % include % 将 HTML 表格包含在任何您想要的位置

% include "mytable.html" with items=<your_items> %

试试这个...