buyax 2017-11-28 02:05 采纳率: 53.3%
浏览 1488
已采纳

前端页面问题,请大佬提点...我是真的不会~

如题我后端的,一个页面改了改去,丑的不行,请教怎么修改~

图片说明

我努力修改成这样子了~

图片说明

 <%@ page contentType="text/html;charset=UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<script type="text/javascript" src="${ctx}/static/js/validation.js"></script>
<script type="text/javascript" src="${ctx}/static/js/jquery.form.js"></script>

<script src="${ctx}/static/kindeditor-4.1.10/kindeditor-all-min.js"
    type="text/javascript"></script>
<script src="${ctx}/static/kindeditor-4.1.10/lang/zh_CN.js"
    type="text/javascript"></script>
<div id="descriptionDiv" style="margin: 2%; width: 98%">

<!--        <tr style="height: 30px">
            <td colspan="2"></td>
        </tr> -->
        <br>
        <tr style="height: 20px">
            <td><span class="labelFont">菜单名称:</span></td>
            <td><input type="text" id="menuName" name=""
                maxlength="20" style="width: 205px; height: 20px;"/></td>
        </tr>
        &nbsp;
        <br/>
        <tr style="height: 20px">
            <td><span class="labelFont">上级菜单:</span></td>
            <td><input class="easyui-combobox" id="parentName"
                style="width: 218px; height: 30px;"
                data-options="valueField:'parentId', textField:'parentName'" /></td>
        </tr>
        <br/>
        <br/>
        <tr style="height: 20px">
            <td><span class="labelFont">type类型:</span></td>
            <td><select class="easyui-combobox" id="type" style="width: 218px; height: 30px;">
                    <option name="type" value="sub_button">(一级)sub_button</option>
                    <option name="type" value="view">(二级)view</option>
                    <option name="type" value="click">(二级)click</option>
            </select></td>
        </tr>
        <br/>
        <br/>
        <tr style="height: 20px">
            <td><span class="labelFont">key的值:</span></td>
            <td><input type="text" id="keyValue" name=""
                maxlength="20" style="width: 205px; height: 20px;"/></td>
        </tr>
        <br/>
        <tr style="height: 20px">
            <td><span class="labelFont">菜单等级:</span></td>
            <td><select class="easyui-combobox" id="grade" style="width: 218px; height: 30px;">
                    <option name="grade" value="1" selected="selected">1级菜单</option>
                    <option name="grade" value="2">2级菜单</option>
            </select></td>
        </tr>
        <br/>
        <br/>
        <tr style="height: 20px">
            <td><span class="labelFont">跳转地址:</span></td>
            <td><input type="text" id="url" name="url"
                maxlength="250" style="width: 205px; height: 20px;"/>
            </td>
            <td>
                <font color="red">注意:正确url请加协议(https://或者http://)</font>
            </td>
        </tr>
        <br/>
    <!--    <tr style="height: 20px">
            <td colspan="2"></td>
        </tr> -->
        <tr>
            <td><a id="saveBtn" class="easyui-linkbutton"
                iconCls="icon-save" style="width: 75px">&nbsp;保存</a> 
            </td>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>
                <a id="returnHomeId" class="easyui-linkbutton" iconCls="icon-back" style="width: 75px" 
                href="${ctx}/rjs/weixin/menu/weiXinMenu">&nbsp;返回</a>
            </td>
        </tr>
</div>
<div id="successDialog" class="easyui-dialog" title="提示"
    data-options="resizable:true,minimizable:false,collapsible:false,maximizable:false,closed:true"
    fit="false" style="width: 300px; height: 100px;">
    <i style="margin-top: 30px">保存成功</i><br /> <a
        class="easyui-linkbutton" iconCls="icon-ok"
        style="width: 75px; margin: 0px auto"
        href="${ctx}/rjs/weixin/menu/weiXinMenu">&nbsp;确定</a>
</div>
<script type="text/javascript">
    //文档加载完成
    $(document).ready(function() {
        loadStatus();
        $("#saveBtn").click(function() {
            loadStatus();
        });
    });

    $(document).ready(function() {
        $("#saveBtn").click(function() {
            var menuName = $("#menuName").val();
            var parentName = $('#parentName').combobox('getText');
            var parentId = $('#parentName').combobox('getValue');
            var type = $('#type').combobox('getValue');
            var keyValue = $("#keyValue").val();
            var grade = $('#grade').combobox('getValue');
            var url = $("#url").val();
            if (menuName == "") {
                $.messager.alert("消息", "请填写菜单名");
                return;
            }
            if (type == "") {
                $.messager.alert("消息", "请选择type类型");
                return;
            }
            if (grade == "") {
                $.messager.alert("消息", "请选择菜单等级");
                return;
            }
            if ($.trim($("input[name=url]").val()) != ""){
                var fwdurl=$("input[name=url]").val();
                var res=!!fwdurl.match(/^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/);
                if(!res){
                    $.messager.alert("消息", "请输入正确的链接地址");                   
                    return;
                }
            }
            el

            $.ajax({
                url : "${ctx}/rjs/weixin/menu/insertMenu",
                type : "post",
                async : false,
                cache : false,
                data : {
                    menuName : menuName,
                    parentId : parentId,
                    type : type,
                    keyValue : keyValue,
                    grade : grade,
                    url : url
                },
                dataType : "json",
                success : function(resp) {
                    if (resp.status == 1) {
                        $("#successDialog").dialog("open");
                    } else {
                        $.messager.alert("消息", resp.message);
                    }
                },
                         error : function(jqXHR, textStatus, errorThrown) {
                    if (jqXHR.getResponseHeader("sessionStatus") != "timeout") {
                        if ($("#flagSpan").val() == 1) {
                            $.messager.alert("消息", "添加菜单失败,请稍后再试");
                        } else {
                            $.messager.alert("消息", "跳转类型或排序错误!");
                        }
                    }
                } 
            })
        });
    });

    //上级名称下拉
    function loadStatus() {
        $.ajax({
            url : "${ctx}/rjs/weixin/menu/getParentName",
            type : "post",
            async : false,
            cache : false,
            dataType : "json",
            success : function(resp) {
                if (resp.data != null && resp.status == "1") {
                    var data = resp.data;
                    var fdata = [];
                    for (var i = 0; i < data.length; i++) {
                        fdata.push(data[i]);
                    }
                    $("#parentName").combobox("loadData", fdata);
                }
            },
            error : function() {
                $.messager.alert("错误", "请求失败,请稍后再试");
            }
        });
    }
</script>

不知道为什么,怎么折腾里面的width 大小 他展示的时候都不变化,
请大佬指点下~

  • 写回答

16条回答

  • 子幽 2017-11-28 02:42
    关注
    <style>
                    table{
                        background-color: #000
                    }
                    td{
                        background: #fff;
                    }
                    td input{
                        height:100%;
                        width:100%;
                        border:0px;
                    }
                </style>
    <!--上面的加载head里,或者写下css里,这是一些演示-->
    
     <table>
                <tr>
                    <td width="300">此处加了一个,,该列全部跟着变</td><td><input type="text" name="name" ></td><td>注释、提示</td>
                </tr>
                <tr>
                    <td width="200">此处又加了一个,无变化</td><td rowspan="2"><input type="text" name="name" value="这儿合并了此列的两行,合并时删掉下面的"></td><td>注释、提示</td>
                </tr>
                <tr>
                    <td width="400">此处再加了一个,他是跟随宽度最大的一起变</td><td>注释、提示</td>
                </tr>
                <tr>
                    <td>测试测试</td><td><input type="text" name="name" ></td><td>注释、提示</td>
                </tr>
                <tr>
                    <td>测试测试</td><td colspan="2"><input type="text" name="name" value="这儿合并了此行的后两列,合并时删掉后面的"></td>
                </tr>
            </table>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(15条)

报告相同问题?

悬赏问题

  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名