在HTML中创建用户定义的表

Create user-defined table in HTML

本文关键字：定义 用户 创建 HTML      更新时间：2023-10-24

我想要的是使用HTML和JS创建一个表。

第一行是表格的标题，应提前设置
表中的行数应在HTML文档的顶部输入（即在创建表之前）。

我正在处理的是将变量"nr"（行数）传输到JS函数中（尝试使用alert进行测试）。

此外，如果有人对如何真正创建表有一个好主意，那就太可惜了。

这就是我目前所掌握的：

<html>
    <head>
        <title> The Hausarbeit</title>
        <script type="text/javascript">
            function makeTable() {
                /*r=document.getElementById("zeilen").value;
                var table=document.getElementById("myTable");
                for(i=1;i<=parseInt(r);i++){
                var row=table.insertRow(i);
                var y=r.insertCell(0);
                    y.innerHtml=i.value;*/
                var zeilen;
                zeilen = document.getElementById("zeilen").value;
                alert('zeilen.value');
            }
            function random() {
            }
        </script>
        <style type="text/css">
            table,
            td {
                border: 2px solid black;
            }
        </style>
    </head>
    <body>
        <div> Anzahl der Arbeitspakete=
            <input type="text" id="zeilen" /input>
            <input type="button" value="Tabelle erstellen" onClick="makeTable()" /input>
            <input type="button" value="Test Werte" onClick="random" /input>
        </div>
        <table id="myTable">
            <tr>
                <td>T&auml;tigkeit</td>
                <td>Dauer</td>
                <td>Vorg&auml;nger</td>
                <td>FAZ</td>
                <td>FEZ</td>
                <td>SAZ</td>
                <td>SEZ</td>
                <td>Puffer</td>
            </tr>
        </table>
    </body>
</html>

此外，列的数量应该是每行8个，每行的前3个单元格应该是可变的，因此可以让另一个脚本计算并显示该表的关键路径分析。

任何帮助都将不胜感激，因为这是4月11日的家庭作业。提前感谢！

更新：由于我似乎没有足够清楚地说明我的问题，我在问题中添加了一些伪代码：

User input: number of rows>>n;
Button onClick: js creates table: n rows, 8 columns; couple of strings for table header;
First column: count 1 to n;
2nd column: cells editable by user>>duration;
3rd column: cells editable by user>>required_packages (separated by ",") 
using the given information (duration and required packages) the below values shall be calculated and filled into the table by pressing a button at the bottom
(one package can depend on more than one package, dependencies work recursively
[e.g. 2 depends on 1, 3 depends on 2, so 3 depends on 1 recursively]) 
4th column: FAZ (earliest time the work package can be started) 
5th column: FEZ (earliest time the work package can be finished) 
6th column: SAZ (latest time the work package can be started)
7th column: SEZ (latest time the work package can be finished) 
//note to 6 and 7: without the entire project getting delayed (dependencies) 
8th column: time difference between 6th and 7th column  (alternatively 4th and 5th column, doesn't matter since difference is the same)

希望你帮了我！再次感谢！：D

要创建表，可以使用以下方法（从表单/字段传入行和列）；

// HTML
<input id='rows'>
<input id='columns'>
<button id='makeTable'>Make Table</button>
// JAVASCRIPT
function makeTable(rows, columns){
  var table = document.createElement('table');
  for(var x = 0; x < rows; x++){
    var tr = document.createElement('tr');
    for(var y = 0; y < columns; y++){
      var td = document.createElement('td');
      td.innerHTML =  'Text' + y;
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  document.body.appendChild(table);
}
var button = document.getElementById('makeTable').addEventListener('click', function(){
  var rows = document.getElementById('rows').value;
  var columns = document.getElementById('columns').value;
  makeTable(rows, columns);
})

更新

固定代码&JS Fiddlehttps://jsfiddle.net/th6c445x/2/

我想你正在寻找这样的东西：

var element = {
    zeilen : document.getElementById("zeilen"),
    table : document.getElementById("myTable"),
    makeTable : document.getElementById("makeTable"),
    random : document.getElementById("random"),
};
var generate = function() {
    element.table.innerHTML = '';
    var zeilen = parseInt(element.zeilen.value);
    for(var i = 0; i < zeilen; i++) {
        var row = element.table.insertRow(i);
        for(var j = 0; j < 8; j++) {
            var cell = row.insertCell(j);
            cell.innerHTML = (i + 1) + ', ' + (j + 1);
        }
    }
}
element.makeTable.addEventListener('click', generate);
element.random.addEventListener('click', function makeTable() {
    element.zeilen.value = Math.round(Math.random() * 10);
    generate();
});
table, td {
    border: 2px solid black;
}
<div> Anzahl der Arbeitspakete=
    <input id="zeilen" type="text" />
    <input id="makeTable" type="button" value="Tabelle erstellen" />
    <input id="random" type="button" value="Test Werte" />
</div>
<table>
    <thead>
          <tr>
              <td>T&auml;tigkeit</td>
              <td>Dauer</td>
              <td>Vorg&auml;nger</td>
              <td>FAZ</td>
              <td>FEZ</td>
              <td>SAZ</td>
              <td>SEZ</td>
              <td>Puffer</td>
          </tr>
    </thead>
    <tbody id="myTable">
    </tbody>
</table>

（另请参见此Fiddle）

相关文章：