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

Dynamically create row with data in jquery

本文关键字：数据包含创建 jquery 动态更新时间：2023-09-26

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

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

        <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(( 。
将数据显示到新的div 中，并带有 $(element(.html(( 。

P.S：如果你愿意，我可以推荐一本书给初学者。

.HTML：

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

.JS：

$('#button').click(function(event){
     event.preventDefault();
     $('#dataAnchor').html($('#event').val() + $('#startDate').val() + $('#endDate').val());
}

希望这段代码有帮助

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);

谢谢