javaweb的BBS项目怎么创建楼中楼

Question

            <td><s:property value="key.nickName"/></td>
            <td><s:property value="value.content"/></td>
            <td><s:property value="value.time"/></td>
            <td><a href="deleteReply.action?replyId=<s:property value="value.id"/>">删除</a></td>             
            <td><a style="color:blue" onclick="show()">回复</a></td>
            <td id="child"></td>
            <s:form action="childReply" id="childForm">
                <s:textfield name="replyPostId" value="%{value.id}"/>               
                <s:textfield id="childReply" name="childReplyPost.content"/>
                <s:submit id="childReplySubmit" value="发送"/>
            </s:form>
        </tr>
    </s:iterator>

这是页面中显示每一层楼内容的代码，是一个迭代，我现在要实现回复楼层的功能，也就是楼中楼。现在因为是迭代，如果我赋值id，那么他们的id都是一样，我动态插入表单代码的话，所有的楼都会出现表单，效果会变成，我点了3楼的回复，结果所有的楼都出现输入框。我要的效果不是这样的，请问有什么方法可以实现我的需求。我琢磨了好久，不会动态插入id,那么所有楼层的id只能一样，这个坑我就出不来了，实在是想破脑袋了。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

你可以使用JavaScript来处理这种复杂的情况。首先，在每个子楼中，你可以在<td>标签内添加一个按钮，然后在JavaScript中监听这个按钮点击事件。当用户点击按钮时，你可以生成一个新的子楼，并将它添加到当前子楼下面。这样，即使用户点击的是同一个ID的按钮，也不会产生重复的子楼。

以下是示例代码：

<table id="parentTable">
    <!-- 每个子楼的内容 -->
</table>

<script>
    // 获取父楼的表格元素
    var parentTable = document.getElementById('parentTable');

    // 创建新的子楼
    function createChildRow() {
        // 获取父楼的最后一个子楼的索引
        var lastRowIndex = parentTable.rows.length - 1;

        // 在父楼的最后添加一个新的子楼
        parentTable.insertRow(lastRowIndex);

        // 设置新子楼的列属性
        var childRow = parentTable.rows[lastRowIndex];
        var childContentCell = childRow.insertCell(0);
        var childTimeCell = childRow.insertCell(1);
        var childNickNameCell = childRow.insertCell(2);
        var childReplyCell = childRow.insertCell(3);
        var childFormCell = childRow.insertCell(4);

        // 将子楼的文本内容插入到相应的单元格
        childContentCell.innerHTML = 'New Child Content';
        childTimeCell.innerHTML = new Date().toLocaleString();
        childNickNameCell.innerHTML = 'New Child Nick Name';
        childReplyCell.innerHTML = '<button onclick="createChildReply(this)">Create Reply</button>';
        childFormCell.innerHTML = '<input type="text" id="childReplyContent" placeholder="Enter reply content">';
    }

    // 当子楼的回复按钮被点击时，创建新的子楼并将其添加到当前子楼下方
    function createChildReply(button) {
        // 获取子楼的当前索引和下标
        var rowIndex = button.parentNode.rowIndex;
        var columnIndex = button.cellIndex;

        // 在子楼的下一行添加一个新的子楼
        var nextRowIndex = rowIndex + 1;
        var nextColumnIndex = columnIndex + 5; // 假设每个子楼有6个单元格

        // 在下一个子楼的对应单元格添加新的子楼
        var nextChildRow = button.parentNode.parentNode.rows[nextRowIndex];
        var nextChildContentCell = nextChildRow.insertCell(nextColumnIndex);
        var nextChildTimeCell = nextChildRow.insertCell(nextColumnIndex + 1);
        var nextChildNickNameCell = nextChildRow.insertCell(nextColumnIndex + 2);
        var nextChildReplyCell = nextChildRow.insertCell(nextColumnIndex + 3);
        var nextChildFormCell = nextChildRow.insertCell(nextColumnIndex + 4);

        // 将新子楼的文本内容插入到相应的单元格
        nextChildContentCell.innerHTML = 'New Next Child Content';
        nextChildTimeCell.innerHTML = new Date().toLocaleString();
        nextChildNickNameCell.innerHTML = 'New Next Child Nick Name';
        nextChildReplyCell.innerHTML = '<button onclick="createNextChildReply(this)">Create Reply</button>';
        nextChildFormCell.innerHTML = '<input type="text" id="nextChildReplyContent" placeholder="Enter reply content">';
    }

    // 当新子楼的回复按钮被点击时，创建新的子楼并将其添加到当前子楼下方
    function createNextChildReply(button) {
        // 获取新子楼的当前索引和下标
        var nextRowIndex = button.parentNode.rowIndex;
        var nextColumnIndex = button.cellIndex;

        // 在新子楼的下一行添加一个新的子楼
        var nextNextRowIndex = nextRowIndex + 1;
        var nextNextColumnIndex = nextColumnIndex + 5; // 假设每个子楼有6个单元格

        // 在下一个子楼的对应单元格添加新的子楼
        var nextNextChildRow = button.parentNode.parentNode.rows[nextNextRowIndex];
        var nextNextChildContentCell = nextNextChildRow.insertCell(nextNextColumnIndex);
        var nextNextChildTimeCell = nextNextChildRow.insertCell(nextNextColumnIndex + 1);
        var nextNextChildNickNameCell = nextNextChildRow.insertCell(nextNextColumnIndex + 2);
        var nextNextChildReplyCell = nextNextChildRow.insertCell(nextNextColumnIndex + 3);
        var nextNextChildFormCell = nextNextChildRow.insertCell(nextNextColumnIndex + 4);

        // 将新子楼的文本内容插入到相应的单元格
        nextNextChildContentCell.innerHTML = 'New Next Next Child Content';
        nextNextChildTimeCell.innerHTML = new Date().toLocaleString();
        nextNextChildNickNameCell.innerHTML = 'New Next Next Child Nick Name';
        nextNextChildReplyCell.innerHTML = '<button onclick="createNextNextChildReply(this)">Create Reply</button>';
        nextNextChildFormCell.innerHTML = '<input type="text" id="nextNextChildReplyContent" placeholder="Enter reply content">';
    }
</script>

在这个例子中，我们首先获取父楼的最后一个子楼的索引，然后在父楼的最后添加一个新的子楼。然后，我们在每个子楼的底部添加了一个按钮，当用户点击这个按钮时，我们会调用createChildReply()函数来创建一个新的子楼。同样地，我们也在每个子楼的底部添加了一个按钮，当用户点击这个按钮时，我们会调用createNextChildReply()函数来创建一个新的子楼。