Foxtable(狐表)用户栏目专家坐堂 → 这网页上能创建一个用户可输入数据的表格吗?


  共有2370人关注过本帖树形打印复制链接

主题:这网页上能创建一个用户可输入数据的表格吗?

帅哥哟,离线,有人找我吗?
有点甜
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:85326 积分:427815 威望:0 精华:5 注册:2012/10/18 22:13:00
  发帖心情 Post By:2018/3/14 16:31:00 [显示全部帖子]


 回到顶部
帅哥哟,离线,有人找我吗?
有点甜
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:85326 积分:427815 威望:0 精华:5 注册:2012/10/18 22:13:00
  发帖心情 Post By:2018/3/14 17:35:00 [显示全部帖子]

提交的时候,执行这个代码可以得到值,如

 

var a = localStorage.tableList;

alert(a);

 

你没看懂 table.js 的代码吗?

 

$(function(){
    //获取本地存储数据,并且转换成对象
    var arr = [];
    function getData(){
      if(localStorage.tableList == undefined){
        arr = [];
      }else{
        arr = JSON.parse(localStorage.tableList);
      }
      return arr;


    }
    add()

    //把数据存到本地存储,并且转换成字符串格式的JSON
    function saveData(data){
    //  var data = getData();
    //  JSON.stringify(localStorage.tableList);
      localStorage.tableList = JSON.stringify(data);
    }

    //增加行方法
    function add(){
      $("tr:not(tr:first,tr:last)").remove();//每次增加行前删除前面的行,否则会重复增加
      var data = getData();
      $.each(data,function(i, v){
        $("<tr>").attr("index",i).html("<td c data-role='name'>" + v.name + "</td>" + "<td c data-role='sex'>" + v.sex + "</td>" + "<td c data-role='age'>" + v.age + "</td>" + "<td c data-role='tel'>" + v.tel + "</td>" + "<td><button class='btn btn-danger btn-sm'>删除</button></td>").insertBefore("tr:last");
      })
      saveData(data);
    }

    //点击增加按钮事件
    $('.btn-sm').click(function(){
        var data = getData();
        data.push({"name": "", "sex": "", "age": "", "tel": ""});
        saveData(data);
        add();

    })


    //删除行方法,事件委派,根据当前点击的按钮的行的索引值
    $('table').on('click','.btn-danger',function(){
      var data = getData();
      var index = $(this).parent().parent().attr("index");
      data.splice(index,1);
      saveData(data);
      add();
    })

 

    //可编辑效果 c
    $('table').on('blur','[c]',function(){
      var data = getData();
      var index = $(this).parent().attr('index');
      var val = $(this).html();
      var attr = $(this).attr('data-role');
      data[index][attr] = val;
      saveData(data);

    })
})


 回到顶部