Javascript 在jquery中动态创建包含数据的行

我正在尝试创建一个事件应用程序。我想要的是在一个表中，有三个输入和一个按钮。用户可以输入事件ie休假以及开始和结束日期。单击按钮时，我想知道如何动态获取该信息，并创建一个新的唯一行，该行下面有该信息

这一新行将包含输入的所有信息，并有一个删除按钮

        <div class="container eventContainer">
        <table class="event">
            <thead class="titleContainer">
                <tr>
                    <td class="titleEvent">Event</td>
                    <td class="titleStartDate">Start Date</td>
                    <td class="titleEndDate">End date</td>
                    <td class="titleButton"></td>
                </tr>
            </thead>
            <tbody class="eventInputMain">
                <tr>
                    <td class="eventInput">
                        <input type="text" name="Event" />
                    </td>
                    <td class="startDateInput">
                        <div>
                            <input type="text" id="startDatePicker">
                            <div class="inputImage"></div>
                        </div>
                    </td>
                    <td class="endDateInput">
                        <input type="text" id="endDatePicker">
                        <div class="inputImage"></div>
                    </td>
                    <td class="eventAdd">
                        <div class="eventAddIcon">
                            <div class="icon32 add"></div>
                        </div>
                    </td>
                </tr>

            </tbody>

        </table>

    </div>

您必须防止按钮的默认单击事件。 您必须添加一个新的div，用于放置信息。 单击按钮时，您将使用$element.val。 使用$element.html将数据显示到新的div中。 附言：如果你愿意，我可以为初学者推荐一本书

HTML:

<div id="dataAnchor"> </div>

希望此代码有帮助

var trElement = $('<tr/>');
trElement.append('<td>'+$('#event').val()+'</td>');
trElement.append('<td>'+$('#startDatePicker').val()+'</td>');
trElement.append('<td>'+$('#endDatePicker').val()+'</td>');
trElement.append('<td><div class="eventAddIcon"><div class="icon32 remove"></div></div></td>');
$('.eventInputMain').append(trElement);

---

谢谢

这是基础知识。去拿一本jquery的书，读一读。这甚至对你自己都很重要。有没有代码显示你到目前为止所做的尝试？

var trElement = $('<tr/>');
trElement.append('<td>'+$('#event').val()+'</td>');
trElement.append('<td>'+$('#startDatePicker').val()+'</td>');
trElement.append('<td>'+$('#endDatePicker').val()+'</td>');
trElement.append('<td><div class="eventAddIcon"><div class="icon32 remove"></div></div></td>');
$('.eventInputMain').append(trElement);