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

Change position or order of a field in javascript

本文关键字：位置 顺序 字段 javascript      更新时间：2023-09-26

是否有一种方法可以仅使用javascript或jquery而不访问jsp来更改字段的顺序?假设我的jsp上有两个字段

名字姓

我可以使它不触及jsp代码如下?通过使用javascript

的姓名字

使用示例代码

<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可以像这样使用display table: 

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

这里有一个jsfiddle来尝试

也可以是最直接的

<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>
相关文章：