Question

我写了一个简单的代码

<!DOCTYPE html>

<html>
<head>

    <style type="text/css">
    body{
        margin-top: 0;
    }

    input{
        margin-top: 10px;
    }
    #nameInput{
        width: 250px;
        margin-left: 60px;

    }
    #ageInput{
        width: 70px;
        margin-left: 71px;
    }
    #emailInput{
        width: 250px;
        margin-left: 60px;
    }
    #dateInput{
        margin-left: 9px;
    }
    #myButton{
        margin-top: 10px;
        margin-left: 100px;
    }
    #yourData{
        margin-top: 100px;
        font-weight: bold;
    }

    #dataDetails, td, th{
        border: 1px solid black;
        border-collapse: collapse;
    }

    #dataDetails{
        width: 50%;
        text-align: center;
    }
    #warning{
        font-weight: bold;
        margin-top: 20px;
        color: red;
    }

    </style>

</head>
<body>

<form>
Name <input type = "text" id="nameInput" required /><br>
Age <input type = "number" id="ageInput" required /><br>
Email <input type = "email" id="emailInput" required /><br>
Joinging Date <input type = "date" id = "dateInput" required />
</form>
<button id="myButton">Submit</button>
<p id="yourData"></p>
<table id="dataDetails"></table>
<p id="warning"></p>

<script>

    var name = document.getElementById("nameInput").value;
    var age = document.getElementById("ageInput").value;
    var email = document.getElementById("emailInput").value;
    var join = document.getElementById("dateInput").value;
    var tableRow = "";

    function myFunction(){

        tableRow = tableRow + "<tr>";
        tableRow = tableRow + "<th>" + "Your Name" + "</th>";
        tableRow = tableRow + "<th>" + "Your Age" + "</th>";
        tableRow = tableRow + "<th>" + "Your Email" + "</th>";
        tableRow = tableRow + "<th>" + "Your Joining Date" + "</th>";
        tableRow = tableRow + "</tr>";

        tableRow = tableRow + "<tr>";
        tableRow = tableRow + "<td>" + name + "</td>";
        tableRow = tableRow + "<td>" + age + "</td>";
        tableRow = tableRow + "<td>" + email + "</td>";
        tableRow = tableRow + "<td>" + join + "</td>";


    tableRow = tableRow + "</tr>";
    return tableRow;
}

    var click = 0;


    document.getElementById("myButton").onclick = function(){
        click = click + 1;

        if (click==1) {
        document.getElementById("yourData").innerHTML = "Here is your filled data";
        document.getElementById("dataDetails").innerHTML = myFunction();
    } else {
        document.getElementById("warning").innerHTML = "Details have already been added";
    }
    }

</script>

</body>
</html>

它工作得很好，但HTML5验证无法正常工作。如果我不填写它们，他们就不会发出任何警告＆amp;对于输入错误的字段也会发生同样的情况，除非将其变为红它将使表格没有任何细节。如何使用HTML5修复它。

另外，我想知道我是否可以简短地编写代码。我的意思是两行，我必须使用tr标签两次。我可以为它制作任何循环吗？把不同的数据放在其中。我尝试过但问题是它插入了两次相同的数据。请帮忙！

Answer 1

你有这个：

<form>
...
</form>
<button id="myButton">Submit</button>

您的提交按钮位于表单之外，

将您的提交按钮放在表单

中

<form>
Name <input type = "text" id="nameInput" required /><br>
Age <input type = "number" id="ageInput" required /><br>
Email <input type = "email" id="emailInput" required /><br>
Joinging Date <input type = "date" id = "dateInput" required />
<button id="myButton">Submit</button>
</form>

请参阅jsfiddle

使代码简短＆amp;表格验证

1 个答案: