Question

我正在尝试动态地向表中添加行。出于某种原因，当我向表中添加一行时，它会全部被压缩，并且不会跨越整行。为什么会发生这种情况，我该如何解决呢？

如果您想运行它并查看我的意思，这是我的文件

jQuery的：

$(document).ready(function () {

    $('.close').on('click', function (e) {
        e.preventDefault();
        $(this).parent().parent().remove();
    });

    $('#submit').click(function () {
        var name = $('input[name=name]').val();
        var phone = $('input[name=phone]').val();
        var email = $('input[name=email]').val();


        var tr = "<tr>\
                    <td>\
                        <a href=\"#" + name + "openModal\">" + name + " </a>\
                            \
                            <div id=\"" + name + "openModal\" class=\"modalDialog\">\
                                <div>\
                                    <a href=\"#close\" title=\"Close\" class=\"close\">X</a>\
                                    <h2> " + name + "</h2>\
                                        ><p>Phone: " + phone + "</p>\
                                        <p>email: " + email + "</p>\
                                </div>\
                            </div>\
                    </td>\
                    <td> \
                        <input type='radio' name=\"" + name + "present\">In<br>\
                        <input type='radio' name=\"" + name + "present\">Out\
                    </td>\
                    <td>\
                        <button type=\"button\" class=\"close\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\
                        <textarea placeholder=\"Optional Note about where your are or your schedule\"></textarea>\
                    </td>\
                </tr>;";
        $('#table').append(tr);

        $("input[type=text]").val("");
        $("input[type=tel]").val("");
        $("input[type=email]").val("");

    });
});

还有我的HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>iSignout</title>

    <link type="text/css" rel="stylesheet" href="bootstrapCSS.css"/>
     <link href="css/bootstrap.min.css" rel="stylesheet"

  </head>
  <body>

    <div id="left">
            <h3 id=add>Add An Employee</h3>
            <form class="input">
                Name: <input type="text" name="name"><br>
                Phone Number: <input type="tel" name="phone"><br>
                E-Mail: <input type="email" name="email"><br>
                <input type="button" value="Add" id="submit" />
            </form>
        </div>

    <!--Creates the tables with employees -->
    <div id='table'>
        <table class= 'table table-hover'>
            <thead>
                <tr id="title"><th colspan=3>People In the Office</th></tr>
            </thead>

            <tbody>
            <!--Create rows here -->
                <tr>
                    <th>Name</th>
                    <th class>IN/OUT Status</th>
                    <th>Optional Note</th>
                </tr>

                <tr>
                    <td>
                        <a href="#openModal">Peter Griffin</a>

                            <div id="openModal" class="modalDialog">
                                <div>
                                    <a href="#close" title="Close" class="close">X</a>
                                    <h2>Peter Griffin</h2>
                                        <p>Phone:123-456-7890.</p>
                                        <p>email: petergriffin@gmail.com</p>
                                </div>
                            </div>
                    </td>
                    <td> 
                        <input type='radio' name="Peterpresent">In<br>
                        <input type='radio' name="Peterpresent">Out
                    </td>
                    <td>
                        <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <textarea placeholder="Optional Note about where your are or your schedule"></textarea>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="bootstrap_script.js"></script>

  </body>
</html>

http://jsfiddle.net/36Qzy/

Answer 1

您可以将新表格行直接附加到<div> - {id} table内。相反，你应该追加它，可能在<tbody>的末尾。您可以使用descendant selector;将append(tr)处理程序中的$('#submit').click()行更改为以下内容：

$('#table tbody').append(tr);

Answer 2

更改

$('#table').append(tr);

到

$('#table table').append(tr);

你的表的id在div上而不在表本身上，所以它将tr元素附加到div＃表而不是表本身

Answer 3

$(function () {
  $("#addRow").click(function () {
    var row = $("<tr><td>1</td><td>E</td><td>E</td><td>E</td></tr>");
    $("#mt > tbody").append(row);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mt" class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
    </tbody>
  </table>

  <button id="addRow" class="btn default">
    Add row
  </button>

Bootstrap将行添加到表中

3 个答案: