请教前端大神..，我这好low啊...能不能整齐点..漂亮点..

问题描述：

如题，我是个java后台的，没怎么接触过前端知识，这里请教下前端的老哥们...这个怎么修改啊...拜托了...

有个跳转地址，平时是隐藏的，只要在需要使用的时候，点击使用跳转调制才显示
图片说明

图片说明

下面是代码..太low了...

 <tr>
                <td width="150px" float="left">
                    <input type="button" id="btn1" value="使用跳转地址" >
                </td>
                <td width="150px" float="right">
                    <input type="button" id="btn2" value="不使用跳转地址">
                </td>

            </tr>
            <br/>
            <tr style="display:none" id="textArea" name="vipType">
                <td width="150px" >跳转地址 </td>
                <td width="1000px">
                    <input type="text" name="fwdurl" maxlength="230" style="width:370px" />
                </td>
            </tr>

            var text = document.getElementById("textArea");
        var oBtn1 = document.getElementById("btn1");
        var oBtn2 = document.getElementById("btn2");

        oBtn1.onclick = function(){
        text.style.display = "block";
        }

        oBtn2.onclick = function(){
        text.style.display =  "none";
        }

    请教下~~

答

block 此元素将显示为块级元素，此元素前后会带有换行符。
http://blog.sina.com.cn/s/blog_5b6c4f550100yk4x.html

答

  <td width="150px" >跳转地址 </td>

把你跳转地址的宽度再加大点，知道你看到字横排显示就会好看一些了

答

完美的布局问题，请自行打开F12调整表情的宽度比如

跳转地址选择150px 点击↓ ↑ 调节

答

你这个我猜是 table 标签布局没弄好

  <tr style="display:none" id="textArea" name="vipType">
            <td width="150px" colspan=“2>跳转地址 </td>
            <td width="1000px">
                <input type="text" name="fwdurl" maxlength="230" style="width:370px" />
            </td>
        </tr>

加个东西在试试，colspan=“2

答

width="1000px"这个应该太大了吧！

答

可以获取其他td 的长度然后赋值给调整地址的td

答

为什么不用flex布局多好用了，display：flex

答

使用表格布局的画，一定要注意，没列的宽度不仅受你给它规定的width影响，受这个表格中同列的最小宽度的影响，
它会保持表格的一致性，所以你要检查其他行和其同列的宽度。

答

不加这行标签是正常的如下图

style="display:block" id="textArea"

图片说明

加了就这样了

图片说明

代码

图片说明

答

        </tr>

        <tr style="display:block" id="textArea">
            <td width="150px" >跳转地址：</td>
            <td width="1000px">
                <input type="text" name="fwdurl" maxlength="230" style="width:370px" />
            </td>
        </tr>


        var text = document.getElementById("textArea");
    var oBtn1 = document.getElementById("btn1");
    var oBtn2 = document.getElementById("btn2");

    oBtn1.onclick = function(){
    text.style.display = "block";
    }

    oBtn2.onclick = function(){
    text.style.display =  "none";
    }

答

        oBtn1.onclick = function(){
        //text.style.display = "block";
                //===>
       text.style.display = "";
        }

请教前端大神..，我这好low啊...能不能整齐点..漂亮点..

相关推荐