js九九乘法表在页面显示

最新推荐文章于 2025-04-18 21:27:07 发布

原创最新推荐文章于 2025-04-18 21:27:07 发布 · 313 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html

这篇博客介绍了如何使用JavaScript动态创建HTML表格，特别是九九乘法表的实现过程。通过创建tr和td元素，并将其添加到tbody中，实现了表格内容的动态渲染。文章强调了在没有初始tbody标签时需要手动添加，以避免渲染问题。

//html里的主标签
<table>
    <tbody></tbody>
</table>

先在html里建一个表格，这里是直接渲染的tr，td到tbody里的。如果有小伙伴不想要在html里写tbody的话那渲染的时候记得把tbody加进去哦，不然容易出现渲染不进去的情况

/*首先要获取到tbody节点*/
    const tbody=querySelector('tbody');
    //然后九九乘法表
    for(let i=1;i<=9;i++){
        //创建一个行元素节点tr
        let tr=document.createElement('tr');
        for(let j=1;j<=i;j++){
            //创建一个列元素节点td
            let td=document.createElement('td');
            //td里面放文本
            td.innerText=`${j}*${i}=${j*i};
//把td添加到tr里去
tr.appendChild(td);`
        }
        //将tr的内容添加到tbody里
        tbody.appendChild(tr);
    }

敲级简单吧~快来动手试试吧~