Question

我正在尝试创建一个事件应用程序。我想要的是在一张桌子里，会有三个输入和一个按钮。用户可以输入事件（即休假）以及开始和结束日期。单击按钮时，我想知道如何动态获取该信息并创建一个新的唯一行，其中包含正确的信息。

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

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

Answer 1

您必须阻止该按钮的默认点击事件。
您必须添加一个新的div来放置信息。
单击按钮时，您将使用$（element）.val（）。
使用$（元素）.html（）。

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

HTML：

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

JS：

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

Answer 2

希望此代码有帮助

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中使用数据动态创建行

2 个答案: