分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何将两个 sql 查询添加到一个 html 表中，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何将两个 sql 查询添加到一个 html 表中？

开发过程中遇到如何将两个 sql 查询添加到一个 html 表中的问题如何解决？下面主要结合日常开发的经验，给出你关于如何将两个 sql 查询添加到一个 html 表中的解决方法建议，希望对你解决如何将两个 sql 查询添加到一个 html 表中有所启发或帮助；

我正在尝试创建一个连接到 MSsql 数据库并在其上调用两个 sql 查询的应用程序。它适用于 nodeJs 后端。现在我尝试将 reactJs 中的这两个结果合并到一个 HTML table 中，但我仍然不能。

我有这个代码：

return (  
    <div classname="App">
      <h1>Search in database</h1>

      <div classname="form">
      <center>
      <label>Search Data from DB</label></center>
      <input type="text" name="material" />
      <button>Search</button>
      
      
      </div>
      <div class="div-table">
                <thead>
                       
             <div class="div-table-row">
             <div class="div-table-col"><th>Type</th></div>
             <div class="div-table-col"><th>Place</th></div>
             <div class="div-table-col"><th>Free space:</th></div>
             </div>
             
             </thead>
             <tbody>       
            {materialList.recordset.map(value=>{
              return (
                <tbody>
                <div class="div-table-col"><td>{value.MATNR}</td></div>
                <div class="div-table-col"><td>{value.NLPLA}</td></div>

                </tbody>
              )
            })}

                {emptySkate.recordset.map(val=>{
              return (
                  <tbody>
                  <div class="div-table-col"><td></td></div>
                  <div class="div-table-col"><td></td></div>
                  <div class="div-table-col"><td>{val.linE}</td></div>
                                                                
                  </tbody>
              )
                })}
                  
                </tbody>  

        </div>
      </div>
     
  )

结果是：

类型	地点	可用空间：
结果查询 1	结果查询 1
		结果查询2

我想要这样的结果：

类型	地点	可用空间：
结果查询 1	结果查询 1	结果查询2

我多次尝试更改tbody和table中的table，等等，但还是没有得到我想要的结果，你不知道如何编辑代码？

解决方法

如果我正确理解您的问题，您可以执行以下操作：

function getRows(materialList,emptySkatE) {

 // some assumptions
 // 1. materialList and emptySkate are linked with index. 
 // 2. materialList[0] and emptySkate[0] makes up the first row
 // 3. materialList is the base list,if this is empty,no rows will be returned
 // 4. if emptySkate is empty,the last column will be null or empty

 const result = materialList.map((ml,indeX) => {
    const es = emptySkate[index] || {};
    return {
       ...ml,...es
    }
 });

 return result;

}

现在，在您的 tbody 中，您可以在 getRows 调用返回的数组上循环，而不是循环遍历两个不同的数组。

const rows = getRows(materialList.recordset,emptyStake.recordset);
  return (
    <tbody>       
      {rows.map(value=>{
        return (
           <tr>
             -- below markup is just to illustrate
             <div class="div-table-col"><td>{value.MATNR}</td></div>
             <div class="div-table-col"><td>{value.NLPLA}</td></div>
             <div class="div-table-col"><td>{val.LinE}</td></div>
           </tr>
       )})}
    </tbody>
  )