当前位置: 首页 > 面试题库 >

使用Javascript创建表格

琴镜
2023-03-14
问题内容

我有一个JavaScript函数,该函数创建具有3行2单元格的表。

谁能告诉我如何使用我的函数创建下表(我需要针对我的情况进行此操作)?

这是下面给出的我的javascript和html代码:

function tableCreate() {

  //body reference

  var body = document.getElementsByTagName("body")[0];



  // create elements <table> and a <tbody>

  var tbl = document.createElement("table");

  var tblBody = document.createElement("tbody");



  // cells creation

  for (var j = 0; j <= 2; j++) {

    // table row creation

    var row = document.createElement("tr");



    for (var i = 0; i < 2; i++) {

      // create element <td> and text node

      //Make text node the contents of <td> element

      // put <td> at end of the table row

      var cell = document.createElement("td");

      var cellText = document.createTextNode("cell is row " + j + ", column " + i);



      cell.appendChild(cellText);

      row.appendChild(cell);

    }



    //row added to end of table body

    tblBody.appendChild(row);

  }



  // append the <tbody> inside the <table>

  tbl.appendChild(tblBody);

  // put <table> in the <body>

  body.appendChild(tbl);

  // tbl border attribute to

  tbl.setAttribute("border", "2");

}


<table width="100%" border="1">

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td rowspan="2">&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

  </tr>

</table>

问题答案:

这应该起作用(对上面的代码进行一些改动)。

function tableCreate() {

  var body = document.getElementsByTagName('body')[0];

  var tbl = document.createElement('table');

  tbl.style.width = '100%';

  tbl.setAttribute('border', '1');

  var tbdy = document.createElement('tbody');

  for (var i = 0; i < 3; i++) {

    var tr = document.createElement('tr');

    for (var j = 0; j < 2; j++) {

      if (i == 2 && j == 1) {

        break

      } else {

        var td = document.createElement('td');

        td.appendChild(document.createTextNode('\u0020'))

        i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null;

        tr.appendChild(td)

      }

    }

    tbdy.appendChild(tr);

  }

  tbl.appendChild(tbdy);

  body.appendChild(tbl)

}

tableCreate();


 类似资料:
  • 问题内容: 查找音云轨道的持续时间。 我希望创建一个秒表功能,当您单击ID 时,该功能将开始计时毫秒,以便当该功能被“单击”一定时间后,if函数将执行某些操作。就我而言,替换图像。并且该函数将在再次单击时将其自身重置。 就像= - 我该如何设置 = ?这是毫秒吗? 问题答案: 您会看到演示代码只是一个开始/停止/重置毫秒计数器。如果您想按时进行奇特的格式化,那完全取决于您。这应该足以让您入门。 这

  • 本文向大家介绍javascript 动态创建表格,包括了javascript 动态创建表格的使用技巧和注意事项,需要的朋友参考一下 第二种方法:

  • 问题内容: 如何使用JavaScript创建SVG元素?我尝试了这个: 但是,它将创建宽度为零,高度为零的SVG元素。 问题答案: 尝试这个 :

  • 问题内容: 我一直在尝试使React和Redux成为秒表。我一直在寻找如何在Redux中设计这样的东西的麻烦。 我想到的第一件事是要执行一个设置初始值的操作。在那之后,我使用一遍又一遍地触发一个操作,该操作使用偏移量来计算经过了多少时间,将其添加到当前时间,然后更新。 这种方法似乎有效,但是我不确定如何清除间隔来停止它。另外,似乎这种设计很差,并且可能有更好的方法来做。 这是一个完整的JSFidd

  • 本文向大家介绍如何使用CSS和JavaScript创建列表网格视图?,包括了如何使用CSS和JavaScript创建列表网格视图?的使用技巧和注意事项,需要的朋友参考一下 要创建列表网格视图,代码如下- 示例 输出结果 上面的代码将产生以下输出- 在单击列表按钮时-

  • 问题内容: 我是新手,似乎无法工作 可以在等程序中实现。当我尝试在程序中运行此语句时,出现了。 我在文档页面中检查了Derby Db Create Statements ,但是找不到这样的选择。 问题答案: 创建表,捕获并检查SQL状态代码。 完整的错误代码列表可以在这里 找到, 但我找不到 ;大概是 。 您需要的代码是。 只需运行一次代码并打印错误代码。不要忘记添加测试以确保代码有效。这样,您可