Question

有没有办法只使用javascript或jquery来改变字段的顺序而无需访问jsp。假设我的jsp上有2个字段

名字姓氏

我可以在触摸jsp代码的情况下进行如下操作吗？并使用javascript

姓氏名字

Answer 1

使用示例代码

<form action="demo_form.asp"> 
First name: <input type="text" name="fname"><br> 
Last name: <input type="text" name="lname"><br> 
<input type="submit" value="Submit"> 
</form>

如果我想更改顺序，请在显示表单时说，我将使用CSS作为建议的注释之一。所以HTML可以是：

<div class="container">
    <form action="demo_form.asp">
        <div class="fname-holder">
            <input type="text" name="fname">
            <label for="fname">First name</label>
        </div>
        <div class="lname-holder">
            <input type="text" name="lname">
            <label for="lname">Last name</label>
        </div>
        <input type="submit" value="Submit">
    </form>
</div>

请注意添加的div和标签标签。使用显示表来改变垂直排序的CSS可以是这样的：

container {
    display: table;
}
.fname-holder {
    display: table-footer-group;
}
.lname-holder {
    display: table-header-group;
}
label {
    display: block;
    float: left;
}

Here's一个小小的尝试

Answer 2

也是最直接的，

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>

    $(document).ready(function() {
        $("form").html(' Last name: <input type="text" name="lname"><br> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> ');
});

</script>

在javascript中更改字段的位置或顺序

2 个答案: