如何在 EJS 中的表格中排列特定单元格中的数据

Question

我试图在我的 home.ejs 上以表格格式显示记录，我在一个单元格中显示与一个特定记录相关联的多个记录的编码有问题

这里我有一个 Task_Name 的 3 个 cmets，根据我的代码，每行显示记录意味着 2X3 总共显示 6 行，但我需要为一个 Task_Name 显示 - 所有 cmets 需要显示在单行中然后我只得到 2 行

抱歉解释太长，请提供逻辑或解决方案

电流输出

预期输出

输出屏幕截图

EJS 部分：

<% for(var i=0; i < status_info.length; i++) { %>
    <tr>
        <td><%= i+1 %></td> 
        <td><%= status_info[i].Task_Name %></td>
        <td><%= status_info[i].status_Name %></td>
        <td><%= status_info[i].Cmnt_Details %>
    </tr>
<% } %>

server.js：

app.get('/',(req, res)=>{
    var getQuery = "select * from table_info"        
    mysqlConnection.query(getQuery,function(err,result){
        if(err) throw err
        else {
            res.render('DashPrac',{status_info:result});
            // console.log(result.length)
        }
    })
});

我从数据库中获取的数据

[ RowDataPacket {
Task_Name: 'Architecture Design',
Cmnt_Details: 'Trying to load the data in all the tables...',
status_Name: 'WIP' },
 RowDataPacket {
Task_Name: 'Architecture Design',
Cmnt_Details: 'Checked the details',
status_Name: 'WIP' },
 RowDataPacket {
Task_Name: 'Architecture Design',
Cmnt_Details: 'Testing is going on',
status_Name: 'WIP' },
 RowDataPacket {
Task_Name: 'Testing Plan',
Cmnt_Details: 'Teting plan to be prepared',
status_Name: 'InProgress' } ]

Answer 1

我在上面第二个@Dhruv 的回答，但是如果你不想对你的 server.js 做任何改变，而是你想玩 EJS 你的代码应该是这样的：

<% 
var prevTask_Name = status_info[0].Task_Name;
var prevStatus_Name = status_info[0].status_Name;

for(var i=0; i < status_info.length; i++) {  
    <tr>
        <td>
%>
<%= i+1 %></td> 
<%  if(i == 0 )
    {
%>
        <td><%= status_info[i].Task_Name %></td>
<%  }
    else
    {
        if(status_info[i].Task_Name == prevTask_Name)
        {
%>
            <td>&nbsp;</td>
<%
        }
        else
        {
%>
            <td><%= status_info[i].Task_Name %></td>
<%      }
    }
    if(i == 0 )
    {
%>
        <td><%= status_info[i].status_Name %></td>
<%  }
    else
    {
        if(status_info[i].status_Name == prevStatus_Name)
        {
%>
            <td>&nbsp;</td>
<%      }
        else
        {
%>
            <td><%= status_info[i].Status_Name %></td>
<%      }
    }
%>  
        <td><%= status_info[i].status_Name %></td>
        <td><%= status_info[i].Cmnt_Details %>
<% 
prevTask_Name = status_info[i].Task_Name;
prevStatus_Name = status_info[i].status_Name;
} %>

Answer 2

您需要修改查询和结果集才能获得此输出。这是一个可以为您工作的解决方案。

server.js

app.get('/',(req, res)=>{
    var getQuery = "select * from table_info order by Task_Name, status_Name"        
    mysqlConnection.query(getQuery,function(err,result){
        if(err) throw err
        else {
            let prevObj={};
            let filteredResult=result.map(e=>{
              let newElem={...e}
              if(newElem.status_Name === prevObj.status_Name)
                newElem.status_Name="";
              if(newElem.Task_Name ===prevObj.Task_Name)
                newElem.Task_Name="";
              prevObj={...e}
              return newElem;
            })
            res.render('DashPrac',{status_info:filteredResult});
            // console.log(result.length)
        }
    })
});

其余代码可以保持不变。它会达到你需要的结果。

如果您想将所有的 cmets 与 sql 查询相结合，这非常简单。

app.get('/',(req, res)=>{
    var getQuery = "select Task_Name, status_Name,group_concat(Cmnt_Details) as Cmnt_Details from table_info group by Task_Name, status_Name"        
    mysqlConnection.query(getQuery,function(err,result){
        if(err) throw err
        else {
            res.render('DashPrac',{status_info:result});
            // console.log(result.length)
        }
    })
});