Question

<!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <link href="mycss.css" rel="stylesheet" type="text/css">

        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>
    <body>

    <div class="container">

        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h4>REGISTER FORM</h4>
                <p><small>Please, fill in all the fields.</small></p>

                <form id="register-form">
                  <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" id="name" placeholder="Enter user name" required>
                  </div>

                  <div class="form-group">
                    <label for="dof">Date of Birth</label>
                    <input type="date" class="form-control" id="dof" placeholder="mm/dd/yyyy" required>
                  </div>

                  <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email">
                  </div>

                  <div class="form-group">
                    <label for="tel">Phone number</label>
                    <input type="tel" class="form-control" id="tel" placeholder="Enter Phone number">
                  </div>

                  <button id="save-button" class="btn btn-primary pull-right" onclick="save();">Save</button>
                </form>

            </div>      
        </div>

        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Date of Birth</th>
                            <th>Email</th>
                            <th>Phone number</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>      
        </div>

    </div>

    <script>
      $( function() {
        $( "#dof" ).datepicker();
      } );
    </script>

    <script type="text/javascript">
    function save() {
        var tbody = document.getElementsByTagName('tbody')[0];
        var name = document.getElementById('name').value;
        var dof = document.getElementById('dof').value;     
        var email = document.getElementById('email').value;
        var tel = document.getElementById('tel').value;

        var tr = document.createElement('tr');
        var columns = [name, dof, email, tel]

        for (var i = 0; i < columns.length; i++) {
            var td = document.createElement("td");
            var text = document.createTextNode(columns[i]);
            td.appendChild(text);
            tr.appendChild(td);
        }

        tbody.appendChild(tr);
    };      
    </script>

    </body>
    </html>

我的save（）函数无效。

P.S。伙计:)不读它..这是支持服务;）它很烦人..我的意思是弹出窗口说它看起来像代码... bla bla

Answer 1

你需要加载你创建的函数。

<script type="text/javascript">
    $(function(){
       save();
    });

    function save() {
        var tbody = document.getElementsByTagName('tbody')[0];
        var name = document.getElementById('name').value;
        var dof = document.getElementById('dof').value;     
        var email = document.getElementById('email').value;
        var tel = document.getElementById('tel').value;

        var tr = document.createElement('tr');
        var columns = [name, dof, email, tel]

        for (var i = 0; i < columns.length; i++) {
            var td = document.createElement("td");
            var text = document.createTextNode(columns[i]);
            td.appendChild(text);
            tr.appendChild(td);

        }

        tbody.appendChild(tr);

    };      
    </script>

Answer 2

您的问题是表单提交，从而重新加载页面并重置所有内容。

您可以通过在事件对象上调用preventDefault()来解决此问题。为此，您必须将两件事改为save函数：

添加一个函数参数来捕获事件对象，让我们将其称为 e ：
```
function save(e) {
```
在函数中的某处调用preventDefault，但通常将其置于最后：
```
    e.preventDefault();
}
```

这不是全部。现在，您必须确保将事件对象传递给您的函数。至少有两种方式：

如果您坚持使用onclick属性，则将其更改为包含特殊event对象：
```
<button ... onclick="save(event);">
```
许多人认为最好不要使用onclick属性。在这种情况下，删除该属性，并通过JavaScript附加事件处理程序：
```
$('#save-button').click(save);
```
在这种情况下，事件对象会自动传递。

进一步评论

当您使用jQuery时，为什么不一直使用它？您的代码中有许多本机DOM调用，例如document.getElementsByTagName，jQuery具有更好的等价物。

将所有内容整合在一起您的代码可能如下所示：

$('#save-button').click(function (e) {
    var columns = [
        $('#name').val(),
        $('#dof').val(),   
        $('#email').val(),
        $('#tel').val()
    ];
    var $tr = $('<tr>');
    for (var i = 0; i < columns.length; i++) {
        $("<td>").text(columns[i]).appendTo($tr);
    }
    $('tbody:first').append($tr);
    e.preventDefault();
});

JS - 动态创建表

2 个答案:

进一步评论