精华内容
下载资源
问答
  • js添加table数据到第一行

    千次阅读 2018-06-23 22:15:12
    js添加table数据到第一行var tbody = document.createElement("tbody"); //获取tbody对象function add(name,sex,phone){ var tr = document.createElement("tr"); //创建一个tr标签 tr = ...

    js添加table数据到第一行

    var tbody = document.createElement("tbody"); //获取tbody对象

    function add(name,sex,phone){

        var tr = document.createElement("tr");    //创建一个tr标签

        tr = tbody.insertRow(0);    //设置添加到第一行,默认-1添加到最后一行

    //添加table数据

         //第一个td
         var td = document.createElement("td");
         var checkbox = document.createElement("input");
         checkbox.type = "checkbox";
         td.appendChild(checkbox);
         tr.appendChild(td);
         //第二个td
         var td2 = document.createElement("td");
         td2.innerText = name;
         tr.appendChild(td2);
         //第三个td
         var td3 = document.createElement("td");
         td3.innerText = "***";
         tr.appendChild(td3);
         //第四个td
         var td4 = document.createElement("td");
         td4.innerText = sex;
         tr.appendChild(td4);
         //第五个td
         var td5 = document.createElement("td");
         td5.innerText = phone;
         tr.appendChild(td5);
         //第六个td
         var td6 = document.createElement("td");
         var img = document.createElement("img");
         img.src = "image/XMB2.jpg";
         img.style.width="50px";
         img.style.height="50px";
         td6.appendChild(img);
         tr.appendChild(td6);
         //第七个td
         var td7 = document.createElement("td");
         var btnFob = document.createElement("input");
         btnFob.type = "button";
         //添加一个自定义属性:key/value
         btnFob.setAttribute("username",userList[i].username);
         btnFob.setAttribute("id",i);
         btnFob.value = "禁用";
         btnFob.style = "padding:5px 5px 5px 5px;margin-right:5px;";
         btnFob.onclick = function(){
          var username = this.getAttribute("username");
          var id = this.getAttribute("id");
          var re = window.confirm("是否"+this.value+"用户:"+username);
          if(re){
           if(this.value=="禁用"){
            userList[id].state=false;
            if(!userList[id].state){
             alert("禁用成功!用户:"+username+",状态:"+userList[id].state);
             this.value="启用";
            }else{
             alert("禁用失败!");
            }
           }else if(this.value=="启用"){
            userList[id].state=true;
            if(userList[id].state){
             alert("启用成功!用户:"+username+",状态:"+userList[id].state);
             this.value="禁用";
            }else{
             alert("启用失败!");
            }
           }
          }
         }
         td7.appendChild(btnFob);
         var btnReset = document.createElement("input");
         btnReset.type = "button";
         btnReset.value = "重置密码";
         btnReset.style = "padding:5px 5px 5px 5px;margin-left:5px;";
         btnReset.onclick = function(){
          alert("重置密码");
         }
         td7.appendChild(btnReset);
         tr.appendChild(td7);
         //2将这个tr标签 (附加appendChild)放入到userTbody里
         userTbody.insertBefore(tr,tr);   
    // appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。
    // insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。
    }


    展开全文
  • js实时修改table数据

    2012-12-11 12:07:18
    js实时修改table数据,简单易用,ajax,json
  • //向 表格传值function setTextareaValue(items,pp){console.log(" 进入函数 items...var tb = document.getElementById("addtable");var td1 = tb.rows[1].cells[1];var td2 = tb.rows[1].cells[2];var td3 = tb.ro...

    //向 表格传值

    function setTextareaValue(items,pp){

    console.log(" 进入函数 items=="+items);

    var tb = document.getElementById("addtable");

    var td1 = tb.rows[1].cells[1];

    var td2 = tb.rows[1].cells[2];

    var td3 = tb.rows[1].cells[3];

    var td4 = tb.rows[1].cells[4];

    var td5 = tb.rows[1].cells[5];

    var td6 = tb.rows[1].cells[6];

    td1.innerHTML = items.province;

    td2.innerHTML = items.city;

    td3.innerHTML = items.district;

    td4.innerHTML = items.street+items.streetNumber;

    td5.innerHTML = pp.lng;

    td6.innerHTML = pp.lat;

    }

    原文:http://www.cnblogs.com/jiangyi666/p/6007931.html

    展开全文
  • 主要介绍了JS代码实现table数据分页效果的相关资料,非常不错,代码简答易懂,非常实用,需要的朋友可以参考下
  • JavaScript JS异步加载table列表

    千次阅读 2016-01-27 10:38:30
    使用原生JS异步加载后台查询出的list并刷新table显示

    使用原生JS异步加载后台查询出的list并刷新table显示

    首先是html

    <table id="generatedTable" style="border:2"; onclick="javascript:GoSel(event);">
        <thead>
        <tr>
            <th style='width:3%; text-align: left'>ID</th>
            <th style='width:10%; text-align: left'>商品编码</th>
            <th style='width:5%; text-align: left'>是否审核</th>
            <th style='width:5%; text-align: left'>是否启用</th>
            <th style='width:10%; text-align: left'>商品名称</th>
            <th style='width:5%; text-align: left'>简称</th>
        </tr>
        </thead>
        <tbody id="tbodyContent"></tbody>
    </table>

    JS代码

    核心思想就是获取到后台传递来的List集合,然后拼凑出一个tbody,然后显示

    function buildTbody(data){
                var tbody = document.getElementById("tbodyContent"); //获取tbody对象
                //先清空tbody
                tbody.innerHTML = "";
                var libGoodsList = data;
                for (var i = 0; i < libGoodsList.length; i++) {
                    var tr = document.createElement("tr"); //创建tr
                    for (var name in libGoodsList[i]) {
                        var td = document.createElement("td"); //创建td
                        var value = libGoodsList[i][name];
                        if (name == "id") { //对象字段:ID
                            td.innerHTML = value;
                        }
                        else if (name == "barcode") { //对象字段:条形码
                            td.innerHTML = value;
                        }
                        else if (name == "name") {  //对象字段:名称
                            td.innerHTML = value;
                        }
                        else if (name == "shortName") {  //对象字段:简称
                            td.innerHTML = value;
                        }
                        else if (name == "isAudit") {  //对象字段:是否审核
                            if(value == false){
                                td.innerHTML = "未审核";
                            }
                            else td.innerHTML = "已审核";
                        }
                        else if (name == "isEnabled") {  //对象字段:是否启用
                            if(value == false){
                                td.innerHTML = "停用";
                            }
                            else td.innerHTML = "启用";
                        }
                        else {
                            continue;  //排除剩余的 
                        }
                        tr.appendChild(td);  //附加到tr节点
                    }
                    tbody.appendChild(tr); //附加到tbody节点
                }
            }
    
    
            /*table中选中行后 ,选中行变黄*/
            function GoSel(evt) {
                selectGoodsId = null;
                var el = evt.srcElement?evt.srcElement:evt.target;
                if(el.tagName.toUpperCase() !="TD") return;
                var tr = el.parentNode;
                tr.style.backgroundColor="yellow";
                if(selTr !=null)
                {
                    selTr.style.backgroundColor ="white";
                }
                selTr = tr;
            }
    展开全文
  • 主要介绍了JS实现table表格数据排序功能(可支持动态数据+分页效果) 的相关资料,非常不错,具有参考借鉴价值,需要的朋友一起看看吧
  • HTML form表单菜单:JS$(function () {//注意:这里是数据表格的加载数据,必须写layui.use(['table', 'layer', 'form', 'laypage', 'laydate'], function () {var table = layui.table //表格,layer = layui....

    HTML form表单

    菜单:

    JS

    $(function () {

    //注意:这里是数据表格的加载数据,必须写

    layui.use(['table', 'layer', 'form', 'laypage', 'laydate'], function () {

    var table = layui.table //表格

    ,layer = layui.layer //弹层

    ,form = layui.form //form表单

    // ..................

    //监听提交 lay-filter="search"

    form.on('submit(search)', function(data){

    var formData = data.field;

    var name = formData.name,

    url=formData.url,

    icon=formData.icon,

    parent_id=formData.parent_id;

    //执行重载

    table.reload('tableReload', {

    page: {

    curr: 1 //重新从第 1 页开始

    }

    , where: {//这里传参 向后台

    name: name

    //可传多个参数到后台... ,分隔

    }

    , url: '/menu/page'//后台做模糊搜索接口路径

    , method: 'post'

    });

    return false;//false:阻止表单跳转 true:表单跳转

    });

    });

    });

    以上这篇layui form表单提交之后重新加载数据表格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • vue.js axios 加载数据table

    万次阅读 2018-05-16 16:32:18
    1.后台数据加载table1.代码直接上代码,分为引用,js和html部分。1.1添加引用&lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt; &lt;script src=&...
  • 主要为大家详细介绍了bootstrapTable+ajax加载数据,以及refresh更新数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • $('#import-table').DataTable({ ajax: { url: '<%=request.getContextPath()%>' + "../../../hot/getByCode.action?code=APP", type: "post", dataType: "json", data: {} }, "scrollCollapse": true...
  • 利用JavaScript ,动态向表格中添加数据,其实方法很简单的,下面给大家分享下实现方法1. 首先先写出表格的表头和主干部分编号姓名职位操作2. 接下来就是网表格里面添加数据,这里用的是原生javascript//模拟一段...
  • <!DOCTYPE html> <... <head>...javascript动态加载table列表数据</title> </head> <body> <table id="student_table"> <thead> <tr>...
  • 本文是对上一篇博文的扩展,用js书写表格,并添加和删除数据,详细代码解释见代码页。 对于文中使用的script脚本函数,下载地址如下:https://pan.baidu.com/s/13OFnj7ncOie_X797hBZtyQ 页面效果如图: 代码...
  • 通过索引找到每一行所对应列的数据,之后对该列的所有数据进行排序(本实例只进行降序排列),排序结果的每个数据的索引就是该数据所对应行的位置。 【问题解决】 1、如何知道那一列需要排...
  • 今天小编就为大家分享一篇layui异步加载table表中某一列数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • bootstrap-table无法加载json数据

    万次阅读 热门讨论 2017-04-11 16:54:13
    bootstrap-table无法加载json数据问题:可以获取后台传过来的json数据但是无法在table中显示出来 解决方案:添加responseHandler 注意:用json加载数据 table 标签不能写 data-toggle=”table” 属性<!--list.ejs ...
  • 在我的项目中,表的内容已清除,并使用原始JavaScript进行了重写,并且DataTables库仅在项目的后面包含。这是在DataTables的isDataTable()-function的帮助下如何工作的精简版本。resultsTable开头是一个空标记,其...
  • 为了解决最近遇到的将后端数据inforesult(数组)动态添加table中的问题 触类旁通,把后端判断去掉就可以本地测试(自己建一个数组,已正确加载,测试通过) 先建立一个table 加载页面时调用函数 window....
  • Layui加载Ajax表格table数据

    千次阅读 2020-03-30 16:48:05
    示例代码,有问题留言,我做详细解释,谢谢各位。...table id="demo" class="layui-hide" lay-filter="test"></table> <script type="text/html" id="username"> {{# if(d.is_hide === 1){ }} ...
  • 1.jsp页面,引入layui的css和js <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:set var=...
  • js根据条件过滤table数据

    千次阅读 2016-06-27 16:26:00
    function changeConcern(type){ var table = document.getElementById("couponDetail-table");//获取表格 var count=table.childElementCount; for(var i=0;i;i++){ var child = table.getElementsB
  • table表格数据自动加载js代码: HTML代码: 效果图: table表格操作知识点: 1.循环表格中的每个td的值。 2.表格操作 转载于:https://www.cnblogs.com/sha728/p/7676326.html...
  • 首先我们用Ajax从后端获取数据,这部分的代码我把它写在basic_tablle.js文件里边。 然后我们在basic_table.html里面通过模板写我们想要实现的效果。 首先我们要引入 然后我们确定要插入的位置,我需要插入的位置是...
  • js实现table表格动态更新数据并排序

    千次阅读 2019-05-26 00:58:57
    js实现table表格动态更新数据并排序的思路 加载页面 即window.onload = function () {}。 获取服务器端缓存数据,初始化表格内容 第一步加载完成后,通过Ajax发起http请求,将服务器端的json数据转换成js对象...
  • 主要介绍了操作Table--动态添加删除表格及数据实现代码,有需要的朋友可以参考一下
  • js 代码: ayer.open({ type: 1 , title: 'xxx--xx:'+ xxx, content: $( '#record-user' ), btn:[ '确定','取消' ], area: [ '80%', '90%' ], resize: false , move: false , success : function ...
  • "javascript:chkRow(this);" > '; tr += ' < input name = "txtSBLId" type = "hidden" value = "-1" /> '; tr += ' td > '; //选择 tr += ' < td align = "center" > '; tr += ' < input id = ...
  • 主要为大家详细介绍了bootstrap table.js填充单元格数据的多种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例讲述了JS动态添加Table的TR,TD实现方法。分享给大家供大家参考。具体实现方法如下:var tempRow=0;var maxRows=0;function insertRows(){tempRow=table1.rows.length-1;maxRows=tempRow;tempRow=tempRow+1;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 149,030
精华内容 59,612
关键字:

js加载table数据