express/pug 循环生成每行表格的表格答案

【问题标题】：express/pug loop to generate table with form per rowexpress/pug 循环生成每行表格的表格
【发布时间】：2019-05-15 12:19:02
【问题描述】：

我刚开始使用 node.js/express/pug，但我无法让它每行生成一个表单。

我有这个模板

mixin listentry(alternate,name,exposureTime,manufactor,usecount,lastused)
tr()
    | <form action='' method='post'>
    td()
        input(type='text',name='name',readonly,class='w100',value=name)
    td()
        input(type='number',name='exposureTime',class='w75',value=exposureTime)
    td()
        input(type='text',name='manufactor',class='w100',value=manufactor)
    if usecount == ""
        td()
        td() never
    else
        td() #{usecount}
        td() #{lastused}
    td() Delete Update
    | </form>


- var alternate = false;
each profile,name in profiles
    +listentry(alternate,name,profile.exposureTime,profile.manufactor,profile.usecount,profile.lastused)
    - var alternate = !alternate;

这会产生：

<tr>
   <form>....</form>
   <td>.... ect

但我希望它会成功

<tr>
   <form.....
   <td>.... ect
   </form>

我做错了什么？

无论我尝试什么，我都无法让它生成包含一行 td 的表单，因此我不输入表单。

我和我尽量不希望有一个包含所有行的大表单。

编辑：带有 form() 的新版本，但仍然没有产生所需的输出

mixin listentry(alternate,name,exposureTime,manufactor,usecount,lastused)
   tr()
     form(action='', method='post')
        td()
            input(type='text',name='name',readonly,class='w100',value=name)
        td()
            input(type='number',name='exposureTime',class='w75',value=exposureTime)
        td()
            input(type='text',name='manufactor',class='w100',value=manufactor)
        if usecount == ""
            td()
            td() never
        else
            td() #{usecount}
            td() #{lastused}
        td() Delete Update

【问题讨论】：

检查您的格式。现在你的 mixin 定义是空的，因为它下面的行没有缩进。
我已经检查过，并且已经重写了几次，今天早上我又做了一次，结果还是一样
在tr 元素内立即包含form 元素是无效的html。只有td 或th 元素被允许成为tr (source) 的直接子元素。您的编译器或浏览器可能正在尝试更正此错误，从而导致意外输出。
该死的，你是对的，这在十年前我做很多 Web 开发时曾经工作过，它可能是一个 hack 你 - 谢谢打算使用 jquery 来提交一行 - 什么可惜了..

标签： node.js express templates pug

【解决方案1】：

这可以通过使用标准的 pug 元素而不是转义的 HTML（使用 |）轻松解决，并确保您想要在表单中的所有内容在表单元素之后缩进两个空格。

  form(action='' method='post')
    td()
      input(type='text',name='name',readonly,class='w100',value=name)
    td()
      input(type='number',name='exposureTime',class='w75',value=exposureTime)
    td()
      input(type='text',name='manufactor',class='w100',value=manufactor)
    if usecount == ""
      td()
      td() never
    else
      td() #{usecount}
      td() #{lastused}
    td() Delete Update

【讨论】：

我已经检查了缩进。事实上，我是从 form() 开始的，但这给了我同样的问题，所以我选择了转义的 html 路由，看看是否有帮助。我要编辑我原来的问题，所以也要显示这个

【解决方案2】：

显然 Sean 是对的，您不能再在每行中有一个表单。

所以解决方法是使用jquery

Create a HTML table where each TR is a FORM

【讨论】：