BalaHan-cc 2021-09-20 22:13 采纳率: 83.3%
浏览 24
已结题

用js代码输出表格，求指点

img

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2021-09-22 09:53
    关注

    字符串拼接

    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
    </style>
</head>

<body>
    <table id="table" border="1">

    </table>
</body>
<script>
    let data = [
        {
            name: "张三",
            studentNumber: "001",
            mathematics: 67,
            clanguage: 78,
            web: 98

        },
        {
            name: "张5",
            studentNumber: "001",
            mathematics: 67,
            clanguage: 56,
            web: 54

        }
    ];
    let table = document.getElementById("table");
    let tabStr = "";
    let thead = `<tr>
            <th>姓名</th>
            <th>学号</th>
            <th>高等数学</th>
            <th>C语言程序设计</th>
            <th>web</th>
        </tr>`;
    tabStr += thead;
    data.map((item) => {
        let math="";
        let c="";
        let web="";
        if(item.mathematics&&item.mathematics<60){
           math="red"
        }

        if(item.clanguage&&item.clanguage<60){
           c="red"
        }

        if(item.web&&item.web<60){
           web="red"
        }
        tabStr += `
      <tr>
      <td>${item.name}</td>  
      <td>${item.studentNumber}</td>
      <td class="${math}">${item.mathematics}</td>  
      <td class="${c}">${item.clanguage}</td>  
      <td class="${web}">${item.web}</td>  
     </tr>
     `
    })
    console.log(tabStr)
    table.innerHTML = tabStr;

</script>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 9月28日
  • 已采纳回答 9月22日
  • 创建了问题 9月20日