2 qq 15290009 qq_15290009 于 2016.03.15 09:47 提问

这样的html页面怎么去实现

图片说明
要实现图片上的那些方法
图片说明
这是我数据库的那些表
图片说明
这是我的食品表样式 是一对多的关系
图片说明
这是我年龄段的表 单独的表

我想问的是 如何去实现第一张图片上说的功能 比如说 第一步取数据什么的 第二部做什么的...........
请给我详细说明 没有做过java 项目 只学过 所以不知道该怎么弄 先谢谢大神了 上班之后 弄前台了 如果是偏向前台的方法更好了 十分感谢

6个回答

showbo
showbo   Ds   Rxr 2016.03.15 14:25
已采纳
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    var food = {
        谷物: {
            //大米数组中依次存储 热量,蛋白质,脂肪,碳水化合物,胆固醇。。。其他食品同理
            //就是和你贴出来的表格中的表头信息顺序要一样,如果没有就用0补上,这里简单举例就列5项了
            //你生成数据一定要生成和你表头列数一样的数字数组
            大米: [1, 2, 3, 4, 5], 小麦: [2, 3, 4, 5, 6], 玉米: [3, 4, 5, 6, 7]/*..更加多谷物*/
        },
        蔬菜: {
            大白菜: [2, 3, 4, 5, 6], 菠菜: [3, 4, 5, 6, 7]/*...更多蔬菜*/
        }
        //....更加多食物种类
    };
    //岁数数组中的营养和上面列出的一致
    var age = { '1-7岁': [1, 2, 3, 4, 5], '8-15岁': [2, 3, 4, 5, 6]/*...更多年龄段*/ };
</script>
食品:<select id="food1"></select><select id="food2"></select><input type="button" value="添加" onclick="addFood()" /><br />
年龄段:<select id="age"></select><br />
<table border="1">
    <tr><td>食物名称</td><td>热量</td><td>蛋白质</td><td>脂肪</td><td>碳水化合物</td><td>胆固醇</td><td>操作</td></tr>
    <tr id="trSum"><td>合计</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr id="trAge"><td>人体正常值</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr id="trDiff"><td>差距值</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tbody id="tbFood"></tbody>
</table>
<script>
    var sFood1 = $('#food1'), sFood2 = $('#food2'), sAge = $('#age')
         //去掉第一个名列和最后一个操作列
        , tdSums =  $('#trSum td:gt(0)').not(':last')
        , tdAges = $('#trAge td:gt(0)').not(':last')
        , tdDiffs = $('#trDiff td:gt(0)').not(':last')
        //////
        , tbFood = $('#tbFood') 
    //初始化食品一级分类及事件
    for (attr in food) sFood1.append('<option value="' + attr + '">' + attr + '</option>');
    sFood1.change(function () {
        var arr = food[this.value];
        sFood2.html('');
        for (attr in arr) sFood2.append('<option value="' + attr + '">' + attr + '</option>');
    }).trigger('change');//触发一级分类加载2级分类
    //初始化年龄段
    for (attr in age) sAge.append('<option value="' + attr + '">' + attr + '</option>');
    sAge.change(function () {
        var arr = age[this.value];
        tdAges.each(function (index) { this.innerHTML = arr[index]; });

        updateSumDiff();
    }).trigger('change');//触发onchange更新trAge中的td数值

    function updateSumDiff() {//更新合计和差距
        var sum = [];//每营养小计
        tbFood.find('tr').each(function () {
            $('td:gt(0)', this).not(':last').each(function (index) {
                sum[index] = (parseFloat(this.innerHTML) || 0) + (sum[index] || 0);
            });
        });
        //更新合计和差距
        tdAges.each(function (index) {
            tdSums.eq(index).html((parseFloat(this.innerHTML) || 0) + (sum[index] || 0));
            tdDiffs.eq(index).html((parseFloat(this.innerHTML) || 0) - (sum[index] || 0));
        });
    }
    function addFood() {
        var arr = food[sFood1.val()][sFood2.val()];
        var s = '<tr><td>' + sFood2.val() + '</td>';
        for (var i = 0; i < arr.length; i++) s += '<td>' + arr[i] + '</td>';
        s += '<td><input type="button" value="删除" onclick="removeFood(this)"/></td></tr>';
        tbFood.append(s);
        updateSumDiff();
    }
    function removeFood(o) { $(o).closest('tr').remove(); updateSumDiff(); }
</script>
qq_15290009
qq_15290009 出现了 undefined 这个
接近 2 年之前 回复
qq_15290009
qq_15290009 那个 在年龄段:<select id="age"></select> <select id="sex"></select> js 的代码改怎么改 我没改对啊
接近 2 年之前 回复
qq_15290009
qq_15290009 好 的 明白了
接近 2 年之前 回复
showbo
showbo 回复热呛: 可以啊,那不是第一块script是数据的额,第二块是脚本处理的,数据要先导入,第二个是jquery的代码,要在jquery后面导入
接近 2 年之前 回复
qq_15290009
qq_15290009 如果 把上面的js 弄成俩个js文件 可以吗
接近 2 年之前 回复
showbo
showbo 回复热呛: 数据量不大不需要ajax,直接生产js文件存储你的数据就行了。很大就需要ajax动态加载了,就是选中第一级食品分类时加载第二级食物需要用
接近 2 年之前 回复
qq_15290009
qq_15290009 就是说 要如果从数据库调入到数据的话 就是先用java查询到数据完了返回json 在完了用ajax去弄 是吗
接近 2 年之前 回复
showbo
showbo 回复热呛: 我给你的是一次性将所有数据库数据生成json格式的导入页面,没用ajax,你要用ajax自己改onchange事件动态加载和上面food,age变量一致的数据,自己注意做个缓存什么的,你要弄就自己弄了
接近 2 年之前 回复
qq_15290009
qq_15290009 你这样的 就用不到数据库了 是吧 那如果 要用到数据库呢
接近 2 年之前 回复
showbo
showbo   Ds   Rxr 2016.03.15 11:25

自己多学下js基础,用ajax动态加载你对应分类的食物或者自己生成js列表,动态插入删除table的tr而已,然后再总计

u013056785
u013056785 哈哈大神
接近 2 年之前 回复
qq_15290009
qq_15290009 哦 那怎么取数据呢
接近 2 年之前 回复
qq_21792169
qq_21792169   2016.03.15 10:34

这个用HTML5和CSS就可以轻松实现

qq_15290009
qq_15290009 怎么实现
接近 2 年之前 回复
qq_21792169
qq_21792169   2016.03.15 10:35

有cgi脚本来处理数据

u013772876
u013772876   2016.03.15 10:50

1:你想做的功能要得到什么样的结果就去反推需要哪些条件?
2:遇到的技术困难点是哪些?
3:拆分任务步骤

理一理思路就知道该怎么下手了!

qq_15290009
qq_15290009 你还是给我说说到底怎么做吧 谢谢了
接近 2 年之前 回复
u013772876
u013772876 回复热呛: 然后根据你选取的内容进行计算,将结果展示给界面。
接近 2 年之前 回复
qq_15290009
qq_15290009 我就知道 先取数据 取完数据后就不知道办了
接近 2 年之前 回复
u013056785
u013056785   2016.03.15 14:02

给你个例子

 var url="{:U('Member/ajax')}";
var lujing=new Array();
$.ajax({
    type:'post',
    url:url,
    dataType:"json",
    success: function (data) { 
                                $.each(data,function(item,i){
                                    if(i.id==3 && i.pos==2)
                                        {
                                           var path=i.path;
                                           var name=i.name;
                                           var sr=path+name;
                                           lujing.push(sr);
                                        }
                                })
                                  }, 
                                  error: function (XMLHttpRequest, textStatus, errorThrown) { 
                                          alert(errorThrown); 
                                  } 
})

用ajax,data就是你后台查询数据库返回的json,用$.each去遍历得到你想要的

u013056785
u013056785 回复热呛: 恩是的呢
接近 2 年之前 回复
qq_15290009
qq_15290009 item 这是什么意思 if(i.id==3 && i.pos==2) 这是查询的数据结果是吧 如果是别的 就要加else if是吗 var path=i.path; var name=i.name; var sr=path+name; 这个是 要输出的东西 吗
接近 2 年之前 回复
qq_15290009
qq_15290009
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!