Question

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

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

我正在努力的是变量＆＃34; nr＆＃34; （行数）进入JS函数（尝试使用alert进行测试）。

另外，如果有人知道如何真正创建表格，那么它就会变得更加a。

这是我到目前为止所得到的：

<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个单元格应该是可更改的，因此可以让另一个脚本计算并显示该表的关键路径分析。 / p>

任何帮助都将非常感谢，因为这是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

Answer 1

要创建表格，您可以使用以下内容（从表单/字段传入行和列）;

// 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);
})

更新

固定代码＆amp; JS小提琴https://jsfiddle.net/th6c445x/2/

Answer 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>

（另见this Fiddle）

在HTML

2 个答案:

更新