table 标签自动在 tr 标签中添加额外的 td

Question

您好，我的代码中出现了一个神秘的情况。 单个<td> 或<th> 在chrome 和Mozilla Firefox 中不知道为什么。

        <div class="right_content">
                <table style="width: 100%; height: 200px; margin-top: 5px;" id="mainTable">
                    <tr>
                        <th colspan="1">Participant Name</th>
                        <td colspan="1">${fullName}<td>
                        <th colspan="1">Role</th>
                        <td colspan="1">${role}<td>
                        <th colspan="1">Brand/Location</th>
                        <td colspan="1">${location}<td>
                    </tr>
                    <tr>
                        <th>Goal Text</th>
                        <td><input name="goalText" id="goalText" name="goalText"
                            class="text_field" size="40" maxlength="95" tabindex="1"
                            title="Minimum Rating For This Competency" /></td>
                        <th>Assessment Center</th>
                        <td><select name="assessmentCenterId" id="assessmentCenterId" class="text_field"
                            tabindex="2" title="Select Assessment Center">
                                <option value="-1">--Select Assessment Center--</option>
                                <c:forEach items="${acList}" var="singleAC" varStatus="sts">
                                <c:choose>
                                <c:when test="${singleAC.id eq 0}">
                                <option value="${singleAC.id}" selected="selected">${singleAC.name} </option>
                                </c:when>
                                <c:otherwise>
                                <option value="${singleAC.id}">${singleAC.name}</option>
                                </c:otherwise>
                                </c:choose>
                                </c:forEach>
                        </select></td>

                        <th>Status</th>
                        <td><select name="status" id="status" class="text_field"
                            tabindex="3" title="Select Status Of IDP">
                                <option value="-1" selected="selected">--Select Status--</option>
                                <c:forEach items="${EnumIDPStatus}" var="singleStatus"
                                    varStatus="sts">
                                    <c:choose>
                                    <c:when test="${(singleStatus.key eq 0)  &&(mode eq 'Add')}">
                                    <option value="${singleStatus.key}" selected="selected">${singleStatus.value}</option>
                                    </c:when>
                                    <c:otherwise>
                                    <option value="${singleStatus.key}">${singleStatus.value}</option>
                                    </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                        </select></td>
                    </tr>

                    <tr>
                        <th>Score</th>
                        <td><input type="text" name="score" id="score" class="text_field"
                            size="40" maxlength="95" tabindex="4" title="Score" /></td>
                        <th>Target Date</th>
                        <td><input type="text" name="targetDate" id="targetDate"
                            class="text_field"  title="Minimum Rating For This Competency" /></td>
                        <th>Extended Date</th>
                        <td><input type="text" name="extendedDate" id="extendedDate"
                            class="text_field"  /></td>
                    </tr>

                    <tr>
                        <th>Manger Comments</th>
                        <td><textarea name="managerComments" id="managerComments"
                                class="text_field" rows="5" cols="50" tabindex="7"
                                title="Minimum Rating For This Competency"></textarea></td>
                        <th>Assessor Comments</th>
                        <td><textarea name="assessorComments" id="assessorComments"
                                class="text_field" rows="5" cols="50" tabindex="8"
                                title="Minimum Rating For This Competency"></textarea></td>
                        <th>Participant Comments</th>
                        <td><textarea name="participantComments"
                                id="participantComments" class="text_field" rows="5" cols="50"
                                tabindex="9" title="Minimum Rating For This Competency"></textarea>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="6" class="frm_footer_buttons"
                            style="text-align: center;"><input type="button"
                            name="btnsubmit" id="btnsubmit" class="frm_button"
                            value="<spring:message code='button.save' />" tabindex="10"
                            onclick="return errorPopup();" /> <input type="reset"
                            class="frm_button" value="Reset" tabindex="11" /> <input
                            type="button" class="frm_button"
                            value="<spring:message code='button.cancel'/>" tabindex="12"
                            onclick="submitRequest('showIDPList.html');" /></td>
                    </tr>
                </table>
        </div>

Answer 1

确保始终正确关闭您的 HTML 标记。

这是您的 HTML 的一部分：

<tr>
    <th colspan="1">Participant Name</th>
    <td colspan="1">${fullName}<td>
    <th colspan="1">Role</th>
    <td colspan="1">${role}<td>
    <th colspan="1">Brand/Location</th>
    <td colspan="1">${location}<td>
</tr>

你能发现问题吗？

仔细查看结束标签。你的<th> 开始标签有正确的</th> 结束标签，但你<td> 没有。他们在结束标签中错过了/，这实际上意味着您打开一个新标签而不是关闭前一个标签。