如果出现错误，则在提交后显示新添加的行

Question

我正在使用此Javascript在表preq中添加已包含4行的行。问题是，当我使用此Javascript添加行时，在表单上正确添加了行，但如果表单上出现了一些错误，并且重新加载表单，则此新添加的行不可见，并且我还希望在行中输入的文本可见

javascript

<script type="text/javascript">
            var counter = 5;
            function addrow()
            {
                if (counter > 10)
                {
                    alert("Only 10 Kind of Works are allowed");
                return false;
                }
            $('#preq > tbody:last').append('<tr><td><input title="Enter Kind Of work" readonly="readonly" onclick="if(this.value!=\'\'){this.value=\'\';opendrop();}else{opendrop();}" id="other_work' + counter + '" name="other_work' + counter + '" type="text" size="30" onclick="opendrop()" <?php if (isset($errors)) { echo 'value="'.htmlentities(@$_POST['other_work' + counter + '']).'"'; } ?>></td><td><input name="client_name' + counter + '" type="text" id="client_name' + counter + '" size="40"/></td><td><input name="firm_name' + counter + '" type="text" id="firm_name' + counter + '" size="40"/></td></tr>');
                counter++;
            }
            </script>

html代码

<table align="left" id="preq" style="display: none;">
                <tr>
                                </tr>
                                    <tr>
                                    <th align="left"><label id="Label1"> Kind of Work </label></th>
                                    <th align="left"><label id="Label1"> Name Of The Client </label></th>
                                    <th align="left"><label id="Label1">Name of Firm / Organisation </label></th>
                                    </tr>
            <tbody>

            <!--4 rows alredy present here-->
            </tbody>
    <tr><td colspan="3"><input type="button" class="button" value="Add Kind of Work" onclick="addrow()"/></td></tr>

            </table>

Answer 1

如果您希望新添加的行在重新加载表单后仍然存在，则需要将其保存到数据库中，否则每次重新加载页面时数据都将丢失。

Answer 2

尝试添加else，这样，只有在没有错误（在if()上发出警告）时才会添加行。

if (counter > 10) {
  alert("Only 10 Kind of Works are allowed");
  return false;
} else {
  $('#preq > tbody:last').append('<tr><td><input title="Enter Kind Of work" readonly="readonly" onclick="if(this.value!=\'\'){this.value=\'\';opendrop();}else{opendrop();}" id="other_work' + counter + '" name="other_work' + counter + '" type="text" size="30" onclick="opendrop()" <?php if (isset($errors)) { echo 'value="'.htmlentities(@$_POST['other_work' + counter + '']).'"'; } ?>></td><td><input name="client_name' + counter + '" type="text" id="client_name' + counter + '" size="40"/></td><td><input name="firm_name' + counter + '" type="text" id="firm_name' + counter + '" size="40"/></td></tr>');
  counter++;
  return true;
}