在表单中动态添加换行符答案

【问题标题】：Adding newline in a form dynamically在表单中动态添加换行符
【发布时间】：2017-06-19 08:03:28
【问题描述】：

我正在处理上述问题。我有一个表单，我想动态地在表单中添加新行（所有这些行，不仅包括其中一个）。

到目前为止我所做的是（但没有成功）：

echo "<script src='/deltio/add.js' language='Javascript' type='text/javascript'></script>";
echo "<form name='test' method='post' action='test.php'>
        <table border='1' align='center'>
            <div id='add'>
            <tr>
                <th align='right'>Proion</th>
                <th align='right'>Partida</th>
                <th align='right'>Stadio Paragwgis</th> 
                <th align='right'>Paratiriseis</th> 
            </tr>
            <tr>
                <td align='left'><input name='proion_paragwgi' type='text'/><br/></td>
                <td align='left'><input name='partida_paragwgi' type='text'/><br/></td>
                <td align='left'><input name='stadio_paragwgis_paragwgi' type='text'/><br/></td>
                <td align='left'><input name='paratiriseis_paragwgi' type='text'/><br/></td>
            </tr>
            </div>
        </table>
        <align='left'><input type='submit' name='submit' value='OK'/>
        <input type='button' value='Prosthiki' onClick='addInput('add');'>
        </form>
";

Javascript(add.js):
    var counter = 1;
    function add(divName) {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<td align='left'><input name='proion_paragwgi' type='text'/><br/></td>";
        document.getElementById(divName).appendChild(newdiv);
    }

如果您能帮助我，我将不胜感激。提前致谢

【问题讨论】：

new lines 是什么意思？在代码中添加\r\n 将不起作用，因为 HTML 会忽略它。你也不能有 <div> 包装器 tr
添加输入文本。动态表单
第 1 步：停止创建无效的 HTML - 您不能将 div 作为 table 的子级
你应该将你的 div 附加到现有的 div 中，你的 html 是无效的，将你的整个内容包装在 div 中。
我该怎么做。我有点困惑，我对此有点初级

标签： javascript forms newline add

【解决方案1】：

主要问题是您在表单中有一个按钮，默认情况下正在提交您的表单。

第二个问题是你在table中使用了div，这是无效的，浏览器会自动关闭开始标签。如果您想动态添加 tds，请添加一个空 tr 并将新元素附加到其中。

根本原因是你试图调用“addInput”函数，而你有“add”。

所以解决方法是这样的：

      <table border='1' align='center'id='add'>
        <tr >
            <th align='right'>Proion</th>
            <th align='right'>Partida</th>
            <th align='right'>Stadio Paragwgis</th> 
            <th align='right'>Paratiriseis</th> 
        </tr>
        <tr>
            <td align='left'><input name='proion_paragwgi' type='text'/><br/></td>
            <td align='left'><input name='partida_paragwgi' type='text'/><br/></td>
            <td align='left'><input name='stadio_paragwgis_paragwgi' type='text'/><br/></td>
            <td align='left'><input name='paratiriseis_paragwgi' type='text'/><br/></td>
        </tr>
    </table>
    <align='left'><input type='submit' name='submit' value='OK'/>
    <input type='button' value='Prosthiki' onclick="add('add');">

var counter = 1;
function add(divName) {
    var newdiv = document.createElement('tr');
    newdiv.innerHTML = "<td align='left'><input name='proion_paragwgi' type='text'/><br/></td>";
    document.getElementById(divName).appendChild(newdiv);
}

【讨论】：

它不工作。我可能做错了什么吗？
不，它只是在单击按钮后没有响应。
我用我的解决方案创建了一个 codepen：codepen.io/anon/pen/jwBqVZ
当您使用 PHP 编写内容时，请注意 ' 和 " 字符。我更改了 onclick="add('add');" 部分。在您的代码中，您应该转义 " 字符。
如果 js 文件未加载，您应该会在控制台或网络选项卡中看到错误。

【解决方案2】：

我错过了什么吗？

test.php

    <?php   
    echo "<script src='/deltio/add.js' language='JavaScript' type='text/javascript'></script>";
    echo "<form name='test' method='post' action='test.php'>
            <table border='1' align='center' id='add'>
                <tr>
                    <th align='right'>Proion</th>
                    <th align='right'>Partida</th>
                    <th align='right'>Stadio Paragwgis</th> 
                    <th align='right'>Paratiriseis</th> 
                </tr>
                <tr>
                    <td align='left'><input name='proion_paragwgi' type='text'/><br/></td>
                    <td align='left'><input name='partida_paragwgi' type='text'/><br/></td>
                    <td align='left'><input name='stadio_paragwgis_paragwgi' type='text'/><br/></td>
                    <td align='left'><input name='paratiriseis_paragwgi' type='text'/><br/></td>
                </tr>
            </table>
            <align='left'><input type='submit' name='submit' value='OK'/>
            <input type='button' value='Prosthiki' onclick='add('add');'>
            </form>
    ";
?>

添加.js

    function add(divName) {
        var newdiv = document.createElement('tr');
        newdiv.innerHTML = '<td align='left'><input name='proion_paragwgi' type='text'/><br/></td>';
        document.getElementById(divName).appendChild(newdiv);
}

【讨论】：

【解决方案3】：

我刚刚发现了问题。代码需要php标签之外的这部分代码，如下：

 <?php
    echo "<script src='/test/add.js'></script>
        <form name='test' method='post' action='test.php'>
        <table border='1' align='center'id='add'>
        <tr >
            <th align='right'>Proion</th>
            <th align='right'>Partida</th>
            <th align='right'>Stadio Paragwgis</th> 
            <th align='right'>Paratiriseis</th> 
        </tr>
        <tr>
            <td align='left'><input name='proion_paragwgi' type='text'/><br/></td>
            <td align='left'><input name='partida_paragwgi' type='text'/><br/></td>
            <td align='left'><input name='stadio_paragwgis_paragwgi' type='text'/><br/></td>
            <td align='left'><input name='paratiriseis_paragwgi' type='text'/><br/></td>
        </tr>
        </table>
        <p align='center'><input type='submit' name='submit' value='OK'/>
        <input type='button' value='Prosthiki' onclick=";?>"add('add');"<?php echo "></form></p>
    ";
?>

为什么会这样？

【讨论】：

您不需要将该部分放在 php 标签之外。你只需要小心转义，就像我在上面的评论中写给你的那样。那行应该是这样的：<input type='button' value='Prosthiki' onclick=\"add('add');\" /></form></p>
我按照你说的写了。我会再检查一次。但是，非常感谢您的帮助:)