Question

我正在使用JSP和servlet创建一个网站，我现在必须分解一个单选按钮列表来插入textarea和一个按钮。我有按钮和textarea隐藏和显示当你点击单选按钮它显示文本区域和按钮。但这只出现在顶部，当页面上有数百个时，这将变得尴尬所以我需要一种方法让它出现在下面。以下是我的HTML在编译时的样子：

<form action="addSpotlight" method="POST">
        <table>


            <tr><td><input type="radio" value="29" name="publicationIDs" ></td><td>A System For Dynamic Server Allocation in Application Server Clusters, IEEE International Symposium on Parallel and Distributed Processsing with Applications, 2008</td> </tr>


            <tr><td><input type="radio" value="30" name="publicationIDs" ></td><td>Analysing BitTorrent's Seeding Strategies, 7th IEEE/IFIP International Conference on Embedded and Ubiquitous Computing (EUC-09), 2009</td> </tr>


            <tr><td><input type="radio" value="31" name="publicationIDs" ></td><td>The Effect of Server Reallocation Time in Dynamic Resource Allocation, UK Performance Engineering Workshop 2009, 2009</td> </tr>


            <tr><td><input type="radio" value="32" name="publicationIDs" ></td><td>idk, hello, 1992</td> </tr>


            <tr><td><input type="radio" value="33" name="publicationIDs" ></td><td>sad, safg, 1992</td> </tr>


            <div class="abstractWriteup"><textarea name="abstract"></textarea>
            <input type="submit" value="Add Spotlight"></div>

        </table>
    </form>

现在这就是我的JSP的样子：

<form action="addSpotlight" method="POST">
        <table>
            <%int i = 0; while(i<ids.size()){%>

            <tr><td><input type="radio" value="<%=ids.get(i)%>" name="publicationIDs" ></td><td><%=info.get(i)%></td> </tr>
            <%i++; }%>

            <div class="abstractWriteup"><textarea name="abstract"></textarea>
            <input type="submit" value="Add Spotlight"></div>

        </table>
    </form>

先谢谢你迪安

Answer 1

您可以使用Node#insertBefore轻松移动DOM节点。（该链接指向MDC，但它是一种标准方法，并得到很好的支持。）

以下是使用Prototype的示例，但您可以使用jQuery或其他库，或者只是直接的DOM方法（如上面链接的方法）（没有库时更麻烦）：

// Called at some point during page init to hook up the event handler
function hookRadioButtons() {
    var form;

    form = $('theForm'); // Assuming you put an ID on the form
    form.observe('click', radioButtonClick);
}

// Event handler for radio button clicks
function radioButtonClick(event) {
    var btn, div;

    // Get the (extended) DOM element for the button
    btn = event.findElement('input[type=radio]');
    if (btn) {
        // Get the (extended) DOM element for the div
        div = $('theDiv'); // Assuming you gave the div an ID

        // Starting from the button, go `up` to the table cell,
        // then over to the following cell, and then insert the
        // div at the top of it
        btn.up('td').next().insert({
            top: div
        });

        // Show the div (if it's hidden)
        div.show();
    }
}

这完全脱离了袖口并且未经测试（并且充满了假设），这只是为了给你一个想法。

Answer 2

您可以使用after(html)或before(html)您只需要为每个单选按钮添加一个唯一值，但您已使用value="<%=ids.get(i)%>"

这样的事情？

$("input[value='PutIdHere']").parent().after(htmlContent);

Answer 3

将div“abstractWriteup”移动到结束表标记之后。将它放在没有包含行和单元格的表中是无效的代码，这将确保它出现在表格下方。

修改

我意识到我可能误会了 - 你希望div出现在点击的单选按钮下面，不是吗？

Answer 4

您无法将<div>放入表格中。这是无效的，浏览器可能会以奇怪的方式呈现它，就像你说的那样，作为顶级。

您必须：

关闭表格，然后放入div，然后如果需要更多行，则打开第二个表格。要确保两个表具有相同的行宽，可以在表上设置table-layout: fixed，并为非液体列添加具有显式宽度的<col>元素。或者，
在新<tr><td>中添加textarea / submit。

话虽如此，我不知道为什么你在这里使用表时你没有真正对列进行任何操作。每个收音机的简单<div>将更容易处理。

由于您也只会勾选一个收音机，因此您可以重复使用相同的textarea / submit元素，然后将它们移动到右侧的onclick。禁用JavaScript后，它们只会停留在底部。

<form id="publications" method="post" action="...">
    <% for(int i= 0; i<ids.size(); i++) { %>
        <div>
            <input type="radio" name="publicationIDs" value="<%= ids.get(i) %>" id="pid_<%= ids.get(i) %>">
            <label for="pid_<%= ids.get(i) %>">
                <%= info.get(i).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll("\"", "&quot;") %>
            </label>
        </div>
    <% } %>
    <div id="abstractsubmit">
        <textarea name="abstract"></textarea>
        <input type="submit" value="Add Spotlight">
    </div>
</form>

注意：<label>已添加，以获得更好的可用性（可点击名称选择广播）。 replaceAll这里充当了穷人的HTML编码器。每次将文本输出到HTML时都需要一个HTML编码器，否则文本中的<等字符会弄乱页面，并可能创建跨站点脚本的安全漏洞。

不幸的是，在一个令人震惊的疏忽中，原始版本的JSP没有包含HTML编码器。许多很多用于Web相关软件的库都有一个可以用来避免写出所有这些replaceAll的库。此外，如果您使用的是JSP 2.0+，则应考虑使用JSTL c:标记而不是scriptlet。 <c:out>默认为您提供输出与HTML编码的行为。

移动抽象元素的示例脚本：

<script type="text/javascript">
    var radios= document.getElementById('publications').elements.publicationIDs;

    function update() {
        // Get div containing selected radio
        //
        var selected= null;
        for (var i= radios.length; i-->0;)
            if (radios[i].checked)
                selected= radios[i].parentNode;

        // Move abstract div just after it
        //
        var a= document.getElementById('abstractsubmit');
        if (selected===null) {
            a.style.display= 'none';
        } else {
            a.style.display= 'block';
            selected.parentNode.insertBefore(a, selected.nextSibling);
        }
    }

    // Bind to all radios, and reflect initial form selectedness state
    //
    for (var i= radios.length; i-->0;)
        radios[i].onclick= function() { setTimeout(update, 0); };
    update();
</script>

setTimeout是因为onclick事件在选择无线电以反映点击之前触发，因此update无法读取选择的无线电。正确的做法是使用onchange代替，但不幸的是，这不会在IE中的有用时间触发，所以onclick就是我们留下的。

update在开始时运行，因为当你在做表格时，你永远无法确定你的初始状态是什么。浏览器在返回页面时经常会尝试记住表单字段，这可能会导致在播放开始时意外收到广播。

（你可以用jQuery缩短它。但不要大大缩短。）

如何使用javascript或JQuery拆分HTML代码

4 个答案: