如何用简单的html dom打印表格的单元格
使用简单的HTML DOM打印表格的单元格，可以通过以下步骤实现：
- 创建一个HTML表格元素：使用
<table>标签创建一个表格元素。 - 添加表头：使用
<thead>标签创建表格的表头部分，并使用<tr>标签创建表头行。 - 添加表头单元格：使用
<th>标签创建表头单元格，并在其中添加表头文本。 - 添加表体：使用
<tbody>标签创建表格的表体部分，并使用<tr>标签创建表体行。 - 添加表体单元格：使用
<td>标签创建表体单元格，并在其中添加表体文本。 - 将表头和表体添加到表格中：使用
appendChild()方法将表头和表体添加到表格元素中。 - 将表格添加到HTML页面中：使用
appendChild()方法将表格元素添加到HTML页面中的适当位置。
下面是一个示例代码，演示如何使用简单的HTML DOM打印表格的单元格：
<!DOCTYPE html>
<html>
<head>
<title>Print Table Cells using HTML DOM</title>
</head>
<body>
<script>
// 创建表格元素
var table = document.createElement("table");
// 创建表头部分
var thead = document.createElement("thead");
var headerRow = document.createElement("tr");
// 创建表头单元格并添加文本
var headerCell1 = document.createElement("th");
headerCell1.textContent = "Header 1";
headerRow.appendChild(headerCell1);
var headerCell2 = document.createElement("th");
headerCell2.textContent = "Header 2";
headerRow.appendChild(headerCell2);
thead.appendChild(headerRow);
// 创建表体部分
var tbody = document.createElement("tbody");
var bodyRow = document.createElement("tr");
// 创建表体单元格并添加文本
var bodyCell1 = document.createElement("td");
bodyCell1.textContent = "Cell 1";
bodyRow.appendChild(bodyCell1);
var bodyCell2 = document.createElement("td");
bodyCell2.textContent = "Cell 2";
bodyRow.appendChild(bodyCell2);
tbody.appendChild(bodyRow);
// 将表头和表体添加到表格中
table.appendChild(thead);
table.appendChild(tbody);
// 将表格添加到HTML页面中
document.body.appendChild(table);
</script>
</body>
</html>以上代码会在页面中创建一个包含表头和表体的简单表格，并打印出两个单元格。你可以根据需要修改表格的结构和内容。
相关·内容
我从JSON数据中创建了一个HTML表，并将该JSON在java脚本中格式化为我所需的HTML表。
我陷入困境的地方是，我希望正确地对齐所有来自我的JSON数据的金额。所有的数字，我只想对齐，但不能这样做。
这是我用json编写的javascript代码
var data = [
{
"amount": 476426,
"billdate": "2018-09-01",
"outlet": "JAYANA
浏览 0提问于2018-10-26得票数 2
回答已采纳
1回答
我有一个带有JSON数据的HTML表，我正在用Java-Script创建该表
我在做的是:-
我有一张表，它的列可以按要求排列。
所以每个标头下面有四列。
我的表上方有一个过滤器，这样用户就可以选择他们想要看到的列。
为此，我有一个侧放的输入字段，其中有所有的列名，用户可以相应地对其进行筛选。
数据正在正确地过滤
我面临的问题是:-
我使用下面的代码隐藏或显示列
$(“#save”).on(“单击”，函数(){ // Get所选类var classes = $("#To") .val() .replace(/\s+/g，“) .split(
浏览 0提问于2019-04-15得票数 1
回答已采纳
如何在这个JavaScript生成的表格中使表格单元格能够单击？
我认为我在script标记中放置注释的位置就是我需要更改代码的地方！
到目前为止，这段代码是有效的！
function createTable(data) {
var table = document.createElement("table");
table.style.border = "1px solid #ffcc33";
var thead = document.createElement("thead");
thead.style.pad
浏览 1提问于2013-06-06得票数 0
2回答
在使用JSON数据创建HTML表时，我遇到了一些问题，因为我对此并不熟悉，因此无法正确地编写逻辑。
我有一个json数据，我必须从它创建一个动态的html表。表的设计并不复杂，这就是为什么我无法用正确的数据填充HTML表的原因。
在我的JSON中，我试图创建：
但无法做到。
我做过像这样的事情
var data = [{
"billdate": "2018-08-01",
"outlet": "S0001",
"amount": 291589,
"cash
浏览 7提问于2019-02-27得票数 5
回答已采纳
我有一个带有下拉列表的HTML表。我所做的就是点击一个按钮。我正在显示正在下拉的HTML表，但我面临的问题是一个错误，即：
TypeError: t为空；无法访问其"setAttribute“属性
我正在使用Bootstrap4下拉列表.
这是我的代码：
var currentlyClickedOutlet="";
$(document).ready(function() {
$('#button').click(function() {
var data = [{
"amount": 47642
浏览 1提问于2018-12-07得票数 7
回答已采纳
2回答
我正在通过JSON数据创建一些HTML表。我有一个servlet，从这里返回一些数据为JSON格式，并使用javascript操作这个JSON数据。我被困的地方是我的AJAX没有调用。
我有一个表单，其中有3个输入(从日期开始)，直到日期和出口，出口在选择选项中有选项1作为“全部”，还有3个更多的选项。
以下是我的HTML表单：
<form id="formId" method="get">
<div class="container">
<h4&g
浏览 2提问于2018-10-25得票数 0
回答已采纳
我有一些JSON数据，使用JavaScript填充一个HTML。我试图实现的是在该列中放置一个名为Action的新列，并在该列中设置名为action drop的按钮。这个按钮将是一个下拉按钮。
基本上，我想要创建一个带有下拉按钮的HTML表。
我已经成功地用静态数据创建了它。
$(window).load(function(){
//save the selector so you don't have to do the lookup everytime
$dropdown = $("#contextMenu");
$(".actionButton"
浏览 2提问于2018-11-30得票数 0
回答已采纳
2回答
我有一个HTML表，它有一些数字形式的数据，我想把它们转换成百分比。
我的Html表有一个列中有Total的数据，它的数据位于同一行，我试图实现的是将nos转换成百分比
这就是我的表现在正在填充的数据。
片段
var data=[
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
"amount": 104801,
"billdate"
浏览 1提问于2018-12-20得票数 0
回答已采纳
我有一个HTML，它需要colspan，但我不知道如何实现它
目前我正在使用/来分离一个列的表中的值，但是这在UI上看起来不太好--很难理解是什么
我的代码片段
$(document).ready(function() {
const data = [{
"outlet": "S0001",
"billdate": "2018-08-22",
"amount": 418418,
"billcount": "3471"
}, {
&#
浏览 1提问于2018-12-24得票数 2
回答已采纳
我正在用JSON数据创建一个Html表，我已经完成了一半，我已经创建了这个表，但是在一个地方遇到了问题
我想做的是:-
我想将两列放入一个标题中，即在一个标题中使用colspan两列
我到目前为止所取得的成就
我将两个值放在带有/分隔符的侧列中，这在UI上看起来不太好
片段
$(document).ready(function() {
const data = [{
"outlet": "S0001",
"billdate": "2018-08-22",
"amoun
浏览 2提问于2018-12-24得票数 2
回答已采纳
2回答
我必须根据用户的要求从两个JSON数据中呈现一个HTML表，我必须独立地从两个查询中获取数据，所以我得到了两个json数据
几乎85%的工作是为了重新构建data2的一些值而面临的问题。
片段
var data = [{
"outlet": "S0001",
"brandcode": "B0002",
"brandname": "Bakery FG",
"grn": 5810
},
{
"outlet": "
浏览 0提问于2019-03-05得票数 2
回答已采纳
1回答
我有一个仅使用CSS或JS进行第一列修复的HTML表，我已经使用JavaScript修复了我的表的头，但是我在修复表的第一列时遇到了问题。
JS代码，我正在使用它来修复我的头
document.getElementById("commonDvScroll").addEventListener("scroll",function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead"
浏览 0提问于2019-05-06得票数 0
回答已采纳
我正在尝试使用JavaScript动态创建一个表。
这里是我正在使用的代码(或者这里是):
function Process(){
CreatTable(['First Name', 'Last Name', 'Email']);
}
function CreatTable(data) {
var checkbox;
var table;
var thead;
var tr;
var th;
var tbody;
tablearea = docum
浏览 3提问于2014-11-22得票数 0
回答已采纳
2回答
我有一个HTML表，它有一些数据。我正在将这些数据转换为百分比，以将它们填充到UI上的HTML中。
我到目前为止所做的事：
使用基本公式计算百分比，即(no./total)100
它给了我标题行的正确结果，也就是一行。
对于第二行，我使用了相同的公式，但是得到了一些错误的结果。
片段
const data = [
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
浏览 0提问于2018-12-20得票数 5
回答已采纳
4回答
我正在处理数据表，我有一个JSON数据，我正在从中创建一个HTML表。
我有一些要求，因为我使用的是数据表，我的问题是，我使用数据表固定列来修复我的列，但是该表没有正确地呈现，它显示如下：
function format(number, decimals = 2, locale = 'en-in') {
const fixed = parseInt(number).toFixed(decimals);
const [int, dec] = fixed.split('.')
const intFormatted = (+int).toLo
浏览 0提问于2019-04-29得票数 4
回答已采纳
我的html文档中有一个带有css样式的表格。当我在html中对表格行和单元格进行硬编码时，样式可以正常工作。例如，当我将鼠标悬停在一行上时，颜色会发生变化。
问题是，当我通过javascript添加所有表格行和单元格时，悬停效果不再起作用。奇怪的是，如果我保留静态数据，并通过javascript添加数据，样式就会工作得很好。
当我想要通过javascript填充表的所有数据时，我如何才能使样式正确工作？
<table class="table table-striped table-bordered table-hover" id="JobPercentComp
浏览 0提问于2015-11-12得票数 2
2回答
我正在创建一个动态HTML表，该表中包含了col，问题是我无法动态地创建col头。下面是我的json
json
[{
"billdate": "2018-09-01",
"outlet": "JAYANAGAR",
"gross": 451458,
"discount": 513,
"GST": 25357,
"amount": 476426
},
{
"billdate": "2
浏览 0提问于2019-04-15得票数 4
回答已采纳
3回答
在JSON数据的帮助下，我创建了一个HTML表，我只使用javascript创建了我的表，而且我的表是动态的
我有一个json数组，其中有几个有数据的对象。
在这个JSON中，我试图创建一个HTML表
我已经成功地创建了头部，但是在创建身体部分时遇到了问题。
我正在尝试创建这样的桌子：
平均值就像所有被取消的票据除以no.of插座的总和，这就是为什么我要计算出口的长度，并将它存储在一个全局变量中。
由于我的代码有点长，我已经注释了我的所有行，我正在做什么，在哪里面对什么问题
在身体部分，我不知道如何填充与出口有关的已取消的账单数据，对于重复的账单也是如此。
浏览 3提问于2019-02-27得票数 3
回答已采纳
我试图通过id="main-table-body"函数调用在表addRow()中添加行，这面临着document.getElementById()检索undefined的问题。
浏览堆栈溢出时，我发现了几个类似的问题，但建议的解决方案在我的情况下行不通。我认为问题在于，在执行函数时，还没有创建html文档。但是即使我把脚本放在身体标签下面，也不会发生任何事情。如果你能告诉我该怎么做，我会非常感激的。
HTML：
<html>
<head>
<meta http-equiv="content-type" content=
浏览 2提问于2014-02-17得票数 4
回答已采纳
朋友们，晚上好，我有了这个想法，现在我在尝试将代码更改为onload()时遇到了困难。 我尝试了很多不同的方法，但没有人为我工作。 我会把我的代码放在这里，如果你能帮助我，我很感激，但是告诉我怎么做，我不想让你只给我最后的代码。 HTML <div>
<button>Get</button>
<div id="table"></div>
</div>
<script src="script.js"></script>
</body>
&l
浏览 10提问于2021-07-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
