Question

我试图在点击按钮时将新行添加到表中。这样做时，我创建的新行将换行到先前存在的行的第一列。

这里是小提琴的链接：

$(".addEntry").on("click",function()
            {
                    $("#momTable").append('<tr class="newRow"><td style="width:20px;"><input type="radio" class="editRowInput" name="editRow"></td> <td>2</td><td><input type="text" class="activityInput active" name="activity" value=""></td><td><input type="text" class="ownerInput active" name="activity" value=""></td><td><input type="text" class="projectNameInput active" name="projectName" value=""></td><td><input type="text" class="regionInput active" name="region" value=""></td><td><input type="text" class="startDateInput active" name="startDate" value=""></td><td><input type="text" class="targetDateInput active" name="targetDate" value=""></td><td><input type="text" class="closureDateInput active" name="closureDate" value=""></td><td><span class="hide">Open</span>   <select name="status" class="showstatusInput"><option value="Open">Open</option><option value="In Progress">In Progress</option><option value="Closed">Closed</option></select></td><td><textarea rows="5" cols="26" class="commentsInput" name="comments" text-align="top"></textarea></td></tr>');
                    console.log(newRow);
            });

有人可以看看吗？

提前致谢...

Answer 1

您使用了以下css类，这些类会使您的代码变得混乱

.newRow{display:none;}
#momTable .newRow{display:block;}

删除上面的css，您的代码将按原样运行。

<强> JSFiddle Demo

注意 - 您的标题行有错误的HTML

<tr>
                    <td style="width:20px;">Edit</th>
                    <th>SlNo</th>..

第一列标记以td开头，将其更正为th

通过jquery动态地向表添加行

1 个答案: