weixin_47204581
weixin_47204581
2021-05-06 22:12
采纳率: 80%
浏览 119

html中<tr th:each = "">中能使用两个不同的变量吗?

<table class="table table-striped table-hover">
      <thead>
        <tr>
          <th><i class="fas fa-calendar"></i> Date Tweeted</th>
          <th><i class="fas fa-hashtag"></i> Tweet</th>
        </tr>
      </thead>
      <tbody>
        <tr th:each="d : ${dates}">
          <td th:text="${{d}}">Tweet Date</td>
        </tr>
        <tr th:each="t : ${tweets}">
          <td th:text="${{t}}">Tweets</td>
        </tr>
      </tbody>
    </table>

这是目前使用的代码,效果如下:

1

但预期效果应该是那行字符串在22这个数字的同一行,也就是归属在同一个<tr>内,请问有没有什么办法能把这两个<tr>部分结合起来或者其他方法能达成这种效果吗?谢谢!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • weixin_42900858
    宣博文 2021-05-07 10:26
    已采纳

    html部分

    <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th><i class="fas fa-calendar"></i> Date Tweeted</th>
              <th><i class="fas fa-hashtag"></i> Tweet</th>
            </tr>
          </thead>
          <tbody>
            <tr class="concatTr">
              
            </tr>
          </tbody>
    </table> 

    js部分 

    let tds=''
    dates.forEach(d=>{
        tds+=`<td>${d}</td>`
    }) 
    tweets.forEach(t=> {
        tds+=`<td>${t}</td>`
    });
    document.querySelector('.concatTr').innerHTML=tds;
    点赞 1 评论
  • isKelel
    iMingzhen 2021-05-07 09:03

    把数组dates和数组tweets合成一个新数组,新数组元素包含dates和tweets的元素

    js可以这样合并

    const newArray = [];
    
    const dates = ['d1','d2'];
    const tweets = ['t1','t2','t3'];
    
    while(dates.length || tweets.length) {
        newArray.push({
            date: dates.shift(),
            tweet: tweets.shift(),
        })
    }
    
    console.log(newArray);
    /*
    [{"date":"d1","tweet":"t1"},{"date":"d2","tweet":"t2"},{"tweet":"t3"}]
    */
    点赞 1 评论
  • weixin_42900858
    宣博文 2021-05-06 22:25

    变量是数组吗,如果是数组的话,循环前先拼接成一个数组也行呀

    点赞 评论
  • weixin_45522855
    一位写bug的前端人 2021-05-07 09:51

    数字和字符串是一一对应吗?是的话,凑成[{数字:1,字符串:“一”}。。。。],然后循环渲染

    点赞 评论

相关推荐