这样的html页面怎么去实现

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

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

6个回答

 <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
热呛 出现了 undefined 这个
4 年多之前 回复
qq_15290009
热呛 那个 在年龄段:<select id="age"></select> <select id="sex"></select> js 的代码改怎么改 我没改对啊
4 年多之前 回复
qq_15290009
热呛 好 的 明白了
4 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复热呛: 可以啊,那不是第一块script是数据的额,第二块是脚本处理的,数据要先导入,第二个是jquery的代码,要在jquery后面导入
4 年多之前 回复
qq_15290009
热呛 如果 把上面的js 弄成俩个js文件 可以吗
4 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复热呛: 数据量不大不需要ajax,直接生产js文件存储你的数据就行了。很大就需要ajax动态加载了,就是选中第一级食品分类时加载第二级食物需要用
4 年多之前 回复
qq_15290009
热呛 就是说 要如果从数据库调入到数据的话 就是先用java查询到数据完了返回json 在完了用ajax去弄 是吗
4 年多之前 回复
showbo
支付宝加好友偷能量挖,胡杨等着我的招呼 回复热呛: 我给你的是一次性将所有数据库数据生成json格式的导入页面,没用ajax,你要用ajax自己改onchange事件动态加载和上面food,age变量一致的数据,自己注意做个缓存什么的,你要弄就自己弄了
4 年多之前 回复
qq_15290009
热呛 你这样的 就用不到数据库了 是吧 那如果 要用到数据库呢
4 年多之前 回复

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

u013056785
hellopapapa3 哈哈大神
4 年多之前 回复
qq_15290009
热呛 哦 那怎么取数据呢
4 年多之前 回复

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

qq_15290009
热呛 怎么实现
4 年多之前 回复

有cgi脚本来处理数据

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

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

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

给你个例子

 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
hellopapapa3 回复热呛: 恩是的呢
4 年多之前 回复
qq_15290009
热呛 item 这是什么意思 if(i.id==3 && i.pos==2) 这是查询的数据结果是吧 如果是别的 就要加else if是吗 var path=i.path; var name=i.name; var sr=path+name; 这个是 要输出的东西 吗
4 年多之前 回复
qq_15290009
热呛
4 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐