Fatal编程技术网
  • javascript/
  • 向DOM树添加元素，帮助在Javascript中创建表

向DOM树添加元素，帮助在Javascript中创建表

javascript web

向DOM树添加元素，帮助在Javascript中创建表,javascript,web,Javascript,Web,我是一个初学者，正在为一门课做作业。作业要求我们创建一个包含html、meta、title和body标记的空白html文件。然后，它指示我们使用javascript代码填充此html文件，其中包含以下详细信息： 一个4x4表格，其标题行作为4行之一计数。 4个标记为上/下/左/右的按钮。 第五个按钮标记为“标记单元格”。 ... 剩下的细节我不告诉你了。这是我遇到麻烦的第一部分，因为我已经创建了其他部分 我编写了以下代码来处理第一部分 var table = document.createEle

我是一个初学者，正在为一门课做作业。作业要求我们创建一个包含html、meta、title和body标记的空白html文件。然后，它指示我们使用javascript代码填充此html文件，其中包含以下详细信息：

一个4x4表格，其标题行作为4行之一计数。
4个标记为上/下/左/右的按钮。 第五个按钮标记为“标记单元格”。 ... 剩下的细节我不告诉你了。这是我遇到麻烦的第一部分，因为我已经创建了其他部分

我编写了以下代码来处理第一部分

var table = document.createElement('table');
var header = document.createThead();
var frstRow = document.createElement('tr');
var databits = document.createElement('td');
frstRow.appendChild(databits);
header.appendChild(frstRow);
table.appendChild(header);
----------------------Everything Below this line works by itself...but it is missing a header

    for (var i = 1; i < 4; i++){
    var tr = document.createElement('tr');   


    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');
    var td4 = document.createElement('td');
    table.style.border="1px solid black";
    td1.style.border="1px solid black";
    td2.style.border="1px solid black";
    td3.style.border="1px solid black";
    td4.style.border="1px solid black";

    var text1 = document.createTextNode(i);
    var text2 = document.createTextNode(i);
    var text3 = document.createTextNode(i);
    var text4 = document.createTextNode(i);

    td1.appendChild(text1);
    td2.appendChild(text2);
    td3.appendChild(text3);
    td4.appendChild(text4);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);


    table.appendChild(tr);
}

document.body.appendChild(table);

var table=document.createElement（'table'）；
var header=document.createThead（）；
var frstRow=document.createElement（'tr'）；
var-databits=document.createElement（'td'）；
frstRow.appendChild（数据位）；
标题.附加子项（frstRow）；
表.appendChild（标题）；
----------------------这行下面的所有内容都会自动运行…但它缺少一个标题
对于（变量i=1；i<4；i++）{
var tr=document.createElement（'tr'）；
var td1=document.createElement（'td'）；
var td2=document.createElement（'td'）；
var td3=document.createElement（'td'）；
var td4=document.createElement（'td'）；
table.style.border=“1px纯黑”；
td1.style.border=“1px纯黑”；
td2.style.border=“1px纯黑”；
td3.style.border=“1px纯黑”；
td4.style.border=“1px纯黑”；
var text1=document.createTextNode（i）；
var text2=document.createTextNode（i）；
var text3=document.createTextNode（i）；
var text4=document.createTextNode（i）；
td1.追加子项（text1）；
td2.追加子项（text2）；
td3.追加子项（text3）；
td4.追加子项（text4）；
tr.appendChild（td1）；
tr.appendChild（td2）；
tr.appendChild（td3）；
tr.appendChild（td4）；
表1.儿童（tr）；
}
document.body.appendChild（表）；
如果我在我画的线下做每件事，它就会消失。它显示为3rx4c表格。我想在这个表的顶部添加一个Th，所以我想我可以在表头的顶部添加代码，以及相应的行和该头的td。当我这样做的时候，我显然是错的

我做错了什么

以下不是最优雅的方法，也肯定不是最快的方法，但我认为它相当简洁地展示了必要的步骤

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Put a title here. No really, do it!</title>
<script type="text/javascript">
function makeTable(){
  var table = document.createElement('table');
  var header = document.createElement('th');
  var frstRow = document.createElement('tr');
  var databits = document.createElement('td');
  var text;

  table.style.border = "1px solid black";
  header.style.border = "1px solid green";
  databits.style.border = "1px solid red";
  // build the header row
  for(var i = 0;i < 4; i++){
    frstRow.appendChild(header.cloneNode());
    // fill the individual header cells
    frstRow.lastChild.textContent = "header " + (i+1);
  }
  // add it to the table
  table.appendChild(frstRow);
  // reset frstRow
  frstRow = document.createElement('tr');
  // make a normal row
  for(var i = 0;i < 4; i++){
    frstRow.appendChild(databits.cloneNode());
    // fill the individual normal cells
    frstRow.lastChild.textContent = "column " + (i+1);
  }
  for(var i = 0;i < 3; i++){
    // take the text content of the first cell in this row
    text = frstRow.firstChild.textContent;
    // append one row (cloneNode(true) copies everything in it, too)
    table.appendChild(frstRow.cloneNode(true));
    // set the first cell of the last row to be an indicator for the row#
    table.lastChild.firstChild.textContent = "Row " + (i+2) + " " + text;
  }
  // put the table in the body
  document.body.appendChild(table);
}
</script>
</head>
<body onload="makeTable()">

</body>
</html>


在这里写一个标题。不，真的，去吧！
函数makeTable（）{
var table=document.createElement（'table'）；
var header=document.createElement（'th'）；
var frstRow=document.createElement（'tr'）；
var-databits=document.createElement（'td'）；
var文本；
table.style.border=“1px纯黑”；
header.style.border=“1px纯绿色”；
databits.style.border=“1px实心红色”；
//构建标题行
对于（变量i=0；i<4；i++）{
frstRow.appendChild（header.cloneNode（））；
//填充各个标题单元格
frstRow.lastChild.textContent=“header”+（i+1）；
}
//将其添加到表中
表1.附录儿童（frstRow）；
//重置frstRow
frstRow=document.createElement（'tr'）；
//划船
对于（变量i=0；i<4；i++）{
frstRow.appendChild（databits.cloneNode（））；
//填充单个正常细胞
frstRow.lastChild.textContent=“column”+（i+1）；
}
对于（变量i=0；i<3；i++）{
//获取此行第一个单元格的文本内容
text=frstRow.firstChild.textContent；
//追加一行（cloneNode（true）也复制其中的所有内容）
表.appendChild（frstRow.cloneNode（true））；
//将最后一行的第一个单元格设置为该行的指示符#
table.lastChild.firstChild.textContent=“行”+（i+2）+”“+text；
}
//把桌子放在身体里
document.body.appendChild（表）；
}

var header=document.createThead（）应该是
var header=document.createElement（'thead'）@zer00ne感谢您的反馈。我想我告诉过我这样做的一本书；不管怎样，它仍然不起作用。我不希望它起作用，它只是一个观察。试着从
表格
下到
td
顺序添加
appendChild
。我会接受你的答案。我同意，这很好地系统地完成了每个阶段。如果你在某个地方找到这个，我想要链接。如果没有的话，我真的很感谢你花了这么多时间把这篇文章打印出来并发表评论！非常感谢！