UI 初心者の方は質問してください_html/css_WEB-ITnose-htmlチュートリアル-php.cn

誰かこのページの作り方を教えてもらえませんか？ asp.net を使用します

ディスカッション (解決策) に返信します

誰か?アドバイスを求められました。。。

小さなモジュールの作成を手伝ってください。。どうもありがとう。。

そこには誰もいませんか？悲しい。。。

誰か来てください。。助けてください。。ありがとう。。

皆さん、エビさん、ありがとう。。

ASP セクションにアクセスして質問してください。

自分で学習してください、これは難しくありません~

複数選択テキストボックス

以前は連続して 3 回しか戻れませんでしたが、今は変更されましたか?

テーブルのレイアウトだけ覚えています。テーブルには 3 つの小さなテーブルがネストされており、各列はチェックボックスと同様に右揃えであり、チェックボックスの属性値は true です。

オーナーさん、私は div+css+jQuery を使ってそれを実現しました。実行するときは、必ず jQuery の js ファイルをインポートしてください:
スタイルファイル css.css

.mainContent {     position: absolute;    top: 50px;    left: 245px;    right: 245px;    bottom: 50px;    overflow: auto;}.topContent{    position: absolute;    top: 5px;    left: 5px;    right: 5px;    height: 28px;    background: url(../images/bg.png);}.leftTitle{    position: relative;    top: 2px;    left: 10px;    padding: 5px;    font: 12px "宋体";}.rightCheck{    position: relative;    top: 5px;    left: 0px;    padding: 2px;}.middleBuyContent{    position: absolute;    top: 35px;    left: 5px;    right: 5px;    height: 165px;}.leftTd{    font: 12px "宋体";    float: right;    padding: 5px;    text-align: right;}.rightTd{    float: right;    padding: 2px;    text-align: left;    margin-right: 20px;}.middleSellContent{    position: absolute;    top: 185px;    left: 5px;    right: 5px;    height: 28px;    background: url(../images/bg.png);}.middleSellInfoContent{    position: absolute;    top: 215px;    left: 5px;    right: 5px;    height: 165px;}.bottomContent{    position: absolute;    top: 370px;    left: 5px;    right: 5px;    height: 28px;    background: url(../images/bg.png);}.bottomBoxInfoContent{    position: absolute;    top: 400px;    left: 5px;    right: 5px;    height: 80px;}

ログイン後にコピー

js ファイル:operation.js

            $(function(){                //采购权限                $("#buyRule").click(function(){                    //获取该div下的复选框的个数                    var v = $("#buyRuleTable").find(":checkbox").size();                    var flag = $(this).get(0).checked;                    if(flag){                        for(var i = 0;i < v;i++){                            $("#buyRuleTable").find(":checkbox").get(i).checked = true;                        }                    }else{                        for(var i = 0;i < v;i++){                            $("#buyRuleTable").find(":checkbox").get(i).checked = false;                        }                    }                });                //销售权限                $("#sellRule").click(function(){                    //获取该div下的复选框的个数                    var v = $("#sellRuleTable").find(":checkbox").size();                    var flag = $(this).get(0).checked;                    if(flag){                        for(var i = 0;i < v;i++){                            $("#sellRuleTable").find(":checkbox").get(i).checked = true;                        }                    }else{                        for(var i = 0;i < v;i++){                            $("#sellRuleTable").find(":checkbox").get(i).checked = false;                        }                    }                });                //仓库管理                $("#boxRule").click(function(){                    //获取该div下的复选框的个数                    var v = $("#boxRuleTable").find(":checkbox").size();                    var flag = $(this).get(0).checked;                    if(flag){                        for(var i = 0;i < v;i++){                            $("#boxRuleTable").find(":checkbox").get(i).checked = true;                        }                    }else{                        for(var i = 0;i < v;i++){                            $("#boxRuleTable").find(":checkbox").get(i).checked = false;                        }                    }                });            })

ログイン後にコピー

HTML ファイルは次のとおりです:index.html

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>netone</title>        <link rel="stylesheet" type="text/css" href="css/css.css" />        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>		<script type="text/javascript" src="js/operaation.js"></script>    </head>    <body>        <div class="mainContent">            <div class="topContent">                <span class="leftTitle">采购权限</span>                <span class="rightCheck"><input type="checkbox" id="buyRule"/></span>            </div>            <div class="middleBuyContent">                <table border="0" width="100%" id="buyRuleTable">                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增采购单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改采购单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除采购单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览采购单</div></td>                    </tr>                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增退货单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改退货单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除退货单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览退货单</div></td>                    </tr>                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">物品采购汇总表</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">物品采购明细表</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">供应商采购汇总表</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">采购订单完成情况</div></td>                    </tr>                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增采购订单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">编辑采购订单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除采购订单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览采购订单</div></td>                    </tr>                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">审核采购订单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">反审采购订单</div></td>                        <td></td>                        <td></td>                    </tr>                </table>            </div>            <div class="middleSellContent">                <span class="leftTitle">销售权限</span>                <span class="rightCheck"><input type="checkbox" id="sellRule"/></span>            </div>            <div class="middleSellInfoContent">                <table border="0" width="100%" id="sellRuleTable">                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增销售单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改销售单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除销售单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览销售单</div></td>                    </tr>                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增退货单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改退货单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除退货单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览退货单</div></td>                    </tr>                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">物品销售汇总表</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">物品销售明细表</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">客户销售汇总表</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">销售订单完成情况</div></td>                    </tr>                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增销售订单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">编辑销售订单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除销售订单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览销售订单</div></td>                    </tr>                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">审核销售订单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">反审销售订单</div></td>                        <td></td>                        <td></td>                    </tr>                </table>            </div>            <div class="bottomContent">                <span class="leftTitle">库存管理</span>                <span class="rightCheck"><input type="checkbox" id="boxRule"/></span>            </div>            <div class="bottomBoxInfoContent">                <table border="0" width="100%" id="boxRuleTable">                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增入库单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改入库单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除入库单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览入库单</div></td>                    </tr>                    <tr>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增出库单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改出库单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除出库单</div></td>                        <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览出库单</div></td>                    </tr>                </table>            </div>        </div>    </body></html>

ログイン後にコピー