js中填充表格数据并动态显示

最新推荐文章于 2023-04-05 11:40:31 发布

原创最新推荐文章于 2023-04-05 11:40:31 发布 · 3.5k 阅读

13 ·

CC 4.0 BY-SA版权

前端学学专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的表格数据展示方法，包括如何构建表格结构、动态添加数据行以及通过函数封装实现数据的灵活操作。具体涵盖了如何获取表格元素、创建行和列、设置样式以及响应用户交互。

table代码：

<table id="refuge-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
     <thead>
        <tr>
          <th width="60"></th>
          <th width="60">序号</th>
          <th width="240">操作</th>
          <th>姓名</th>
          <th>微信昵称</th>
          <th>手机号码</th>
          <th>所在地</th>
          <th>申请</th>
        </tr>
     </thead>
     <tbody id="refuge-tbody">
     </tbody>
     </table>

js代码：
获取tbody的id：var tbody = document.getElementById('refuge-tbody');
函数封装：

   function getDataJson(datas) {
        for (var i = 0; i < datas.length; i++) {
            var trow = getDataRow(datas[i], i);
            tbody.appendChild(trow);
        }
    }

    function getDataRow(rowData, number) {
        var row = document.createElement('tr'); //创建行

        var checkbox = document.createElement('td');//创建列
        row.appendChild(checkbox);
        var btnCheckbox = document.createElement('input');
        btnCheckbox.setAttribute('type','checkbox');
        btnCheckbox.setAttribute('value','false');
        checkbox.appendChild(btnCheckbox);

        var id = document.createElement('td');   //number
        id.innerHTML = rowData.id;
        row.appendChild(id);

        var state = document.createElement('td');  //state refuse or pass
        //state.innerHTML = rowData.state;
        row.appendChild(state);
        var refuse = document.createElement("a");
        refuse.setAttribute('data-toggle',"modal" );
        refuse.setAttribute('data-target',"#myModalRefuse" );
        refuse.innerText = '拒绝申请';
        refuse.style.color = "red";
        refuse.style.cursor = "pointer";
        refuse.style.textDecoration = "underline";
        var pass = document.createElement("a");
        pass.setAttribute('data-toggle',"modal" );
        pass.setAttribute('data-target',"#myModalPass" );
        pass.innerText = '通过申请';
        pass.style.marginLeft = "10px";
        pass.style.color = "blue";
        pass.style.cursor = "pointer";
        pass.style.textDecoration = "underline";
        //if(rowData.state == 0) {
            state.appendChild(refuse);
            state.appendChild(pass);
        //}

        var name = document.createElement('td');  //name
        name.innerHTML = rowData.name;
        row.appendChild(name);

        var nickname = document.createElement('td'); //nickname
        nickname.innerHTML = rowData.nickname;
        row.appendChild(nickname);

        var phonenum = document.createElement('td'); //phonenum
        phonenum.innerHTML = rowData.phonenum;
        row.appendChild(phonenum);

        var address = document.createElement('td'); //address
        address.innerHTML = rowData.address;
        row.appendChild(address);

        var content = document.createElement('td');  //state refuse or pass
        row.appendChild(content);
        var contentBtn = document.createElement("a");
        contentBtn.setAttribute('data-toggle',"modal" );
        contentBtn.setAttribute('data-target',"#myModalShowContent" );
        contentBtn.innerText = '查看申请内容';
        contentBtn.style.color = "blue";
        contentBtn.style.cursor = "pointer";
        content.appendChild(contentBtn);

        return row;
    }