如何使用每个循环动态添加数据

Question

我正在尝试从数组对象在表中动态添加数据，并且我还需要在操作列中添加序列号和图标（批准和拒绝）。 但是现在只能为数组对象添加员工姓名。 如何在此表的列中添加序列号和图标。 请检查图像。 https://i.stack.imgur.com/sJDWK.png

Javascript -

const button = document.getElementById('btn2');
const employee = [
    {
        name:'shubham',
        company:'google'
    },
    {
        name:'yash',
        company:'facebook'
    },
    {
        name:'saurabh',
        company:'hcl'
    }
]

const mydiv = document.getElementById('mydiv');

employee.forEach(event =>{
    const td = document.createElement('td');
    const tr = document.createElement('tr');
    tr.appendChild(td);
    mydiv.appendChild(tr);
    td.innerHTML = event.name
})

button.addEventListener('click', () =>{
    const username = document.getElementById('username');
    const userpass = document.getElementById('userpass');

    if((username.value == "admin" && userpass.value == "admin") && (username.value != "" && userpass.value != "")){
        console.log('yes')
        window.location.pathname = 'dashboard.html';
    }

})

HTML -

<!DOCTYPE html>
<html>
<head>
    <title></title>


    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container">
<h2>Welcome</h2>
<div >
    <table class="table table-bordered" id="mydiv">
        <tr>
            <th>Sr.No.</th>
            <th>Employee Name</th>
            <th>Action</th>
        </tr>
    </table>
</div>
</div>


<script type="text/javascript" src="function.js"></script>
</body>
</html>

Answer 1

你可以尝试这样的事情：

const employee = [
    {
        name:'shubham',
        company:'google',
        action: 'some action'
    },
    {
        name:'yash',
        company:'facebook',
        action: 'some action'
    },
    {
        name:'saurabh',
        company:'hcl',
        action: 'some action'
    }
]

const mydiv = document.getElementById('mydiv');

employee.forEach((event, key) =>{
    const serialTd = document.createElement('td');
    const nameTd = document.createElement('td');
    const actionTd = document.createElement('td');
    const tr = document.createElement('tr');
    tr.appendChild(serialTd);
    tr.appendChild(nameTd);
    tr.appendChild(actionTd);
    mydiv.appendChild(tr);
    nameTd.innerHTML = event.name
    serialTD.innerHTML = key
    actionTd.innerHTML = event.action
})

如何使用每个循环动态添加数据

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-11-26 06:57:58

如何使用每个循环动态添加数据

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-11-26 06:57:58

解决方案1
2 已采纳 2019-11-26 06:57:58