JavaScript函数自动重新加载

这里的问题是，当我删除必填字段时，我不需要输入必填字段。表仍然为空，当我输入时，另一个问题是（无效字符） 表数据也将被删除

我需要输入字段不是必需的，当单击“添加”时，它会添加一个新行

var myInput=document.getElementById（“myInput”）
myTable=document.getElementById（“myTable”）
i=1
num=1
tabledata=myTable.innerHTML；
函数arr（）{
如果（myInput.value！=“”）{
if（/^[a-z]+$/i.test（myInput.value））{
如果（数值%2==0）{
myTable.innerHTML=myTable.innerHTML+''+i+''+myInput.value+''；
myInput.value=“”；
i++；
}否则{
myTable.innerHTML=myTable.innerHTML+''+i+''+myInput.value+''；
myInput.value=“”；
i++；
}
num++；
}
否则{
警报（“请输入有效的字符”）；
}
}否则{
警报（“需要此字段，请输入您的姓名”）
}}; 
函数res（）{
myTable.innerHTML=“Id Name”；
i=1；
num=1；
}

输入您的姓名
添加
身份证件
名称
重置

我不完全理解您需要什么，但我发现这里有一点缺陷： 当您单击“添加”按钮时，表单正在提交，因此您需要中断此操作

试试看：

<style>
    #myTable tr {
        background: #FF8000
    }

    #myTable tr:nth-child(odd){
        background: #FFB366
    }
</style>

<h1>Enter Your Name</h1>

<form id="myForm">
    <input type="text" id="myInput" required />
    <input type="submit" />
</form>

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody id="myTable"></tbody>
</table>

<button id="myButton">Reset</button>

<script>
    (function(){
        "use strict";

        var
            form  = document.getElementById("myForm"),
            input = document.getElementById("myInput"),
            table = document.getElementById("myTable"),
            reset = document.getElementById("myButton");


        form.addEventListener("submit", add, true);
        function add(event){
            event.preventDefault();

            if( /^[a-z]+$/i.test(myInput.value) )
                table.innerHTML += '<tr><td>' + (table.children.length + 1) + '</td><td>' + input.value + '</td></tr>';


            return input.value = '';
        }

        function reset(){
            table.innerHTML = '';
        }
    })()
</script>

#myTable tr{
背景：#FF8000
}
#myTable tr:n个子项（奇数）{
背景：#FFB366
}
输入您的姓名
身份证件
名称
重置
（功能（）{
“严格使用”；
变量
form=document.getElementById（“myForm”），
输入=document.getElementById（“myInput”），
table=document.getElementById（“myTable”），
重置=document.getElementById（“myButton”）；
表格.附录列表（“提交”，添加，真实）；
功能添加（事件）{
event.preventDefault（）；
if（/^[a-z]+$/i.test（myInput.value））
table.innerHTML+=''+（table.children.length+1）+''+input.value+''；
返回input.value=''；
}
函数重置（）{
table.innerHTML=''；
}
})()

不清楚您想做什么。编辑你的问题或编排和标点符号有助于提高可读性。你的键盘坏了吗？奇怪的大写字母和缺少标点符号让人很难理解。好的：1）添加新值时会出现错误气泡，即使字段不是空的。2） 如果输入了无效字符，则整个表将消失。伙计，当我单击按钮并从输入中删除必需字符时，不会发生任何事情

事件。preventDefault（）

应该可以解决这两个问题。@LGT，所以他的意思是，当单击按钮时，会显示一个“必需”提示，如果输入的字符不正确，整个表将消失？只是，我的英语不好，我想我不能理解一些东西…@TurarAbu是的，这就是我的意思，但我需要删除输入字段中的必填项，当我删除它时，按钮不会添加anything@TurarAbu非常感谢它的工作，但是当你点击表单提交的“添加”按钮时，你做了什么？？？@J.Roger。所以，当regex测试正常时，脚本清除输入，表单无法提交，因为输入具有“required”属性。但是，当regex测试返回false时，脚本只显示alert而不执行任何操作。对于修复，请使用preventDefault（）；不管怎样，函数说-不要提交表单，页面不更新