简单的 JavaScript HTML 表格生成器

问题描述 投票：0回答：2

这是 JavaScript HTML 表格生成器。 

Input (from textarea)
<label> <content> //each line
Order by <label>

我需要输入这样的值： Input Values 或

A 1
A 2
A 3
B 1
B 2
C 1
C 2
C 3
C 4

输出应该是：

Example

问题就在这里。我没有想法完成我的工作，但我尽力编码。有人可以帮助我吗？拜托！！

function progress(){
    var txt = document.form.txt.value;
    var line = txt.split("\n"); // every line of context
    var line_num = line.length; // total line
    for (var i = 0; i<line_num; i++)
    {
        var seq = line[i].split(" "); //seq[0]: name of label, seq[1] : context
        // CODE START

        // CODE END
    }
    var out="<table>"; // if the value exist, using table to display

    // CODE START

    // CODE END
    out=out+"</table>"
    document.getElementById('out').innerHTML=out; // display the result

}

和html代码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
        <title> HW3 </title>
        <script type="text/javascript" src="abc.js"></script>
        <style type = "text/css">
        table
        {
            width: 300px;           
            border:1px solid black;
            border-collapse : collapse;        
        }
        tr td
        {
            border:1px solid black;
        }
        </style>
    </head>
    <body>  
        <form name = "form" enctype="multipart/form-data" id="form" method="post" onsubmit="return false;">
            <label><textarea name="txt" rows="20" cols = "40"></textarea></label>
            <br>
            <button type="submit" onclick = "javascript:progress()">Submit</button>
        </form>
        <p id= "out"></p>
    </body>
</html>
javascript html-table
2个回答
1
投票

我已经根据您的要求创建了样品。

请检查此代码。

function progress(){
  var txt = document.form.txt.value;
  var line = txt.split("\n"); // every line of context
  var line_num = line.length; // total line
  var uniqueValue = [];
  var values = [];
  for (var i = 0; i<line_num; i++)
  {
    var seq = line[i].split(" "); //seq[0]: name of label, seq[1] : context
    if (uniqueValue.indexOf(seq[0]) == -1)
      {
        uniqueValue.push(seq[0]);
        values[uniqueValue.indexOf(seq[0])] = new Array();
      }
     values[uniqueValue.indexOf(seq[0])].push(seq[1]);
    }
    var maxLength = 0;
    var length = values.length;
    for (i = 0; i < length; i++)
    {
      if(values[i].length > maxLength)
        maxLength = values[i].length
    }
    if (length > 0)
    {
      var out = "<table>"; // if the value exist, using table to display
      for (var i = 0; i <= maxLength; i++)
      {
        out = out + "<tr>"
        for (var j = 0; j < length; j++)
        {
          if(i==0)
          {
            out = out+ "<th>"+ uniqueValue[j] +"</th>";
          }
          else
          {
            if (values[j][i - 1])
              out = out + "<td>" + values[j][i - 1] + "</td>";
            else
              out = out + "<td></td>";
          }
      }
      out = out + "</tr>"
    }
    out = out + "</table>"
   }
  document.getElementById('out').innerHTML=out; // display the result
}
table
        {
            width: 300px;           
            border:1px solid black;
            border-collapse : collapse;        
        }
        tr td, tr th
        {
            border:1px solid black;
        }
<form name = "form" enctype="multipart/form-data" id="form" method="post" onsubmit="return false;">
  <label><textarea name="txt" rows="20" cols = "40"></textarea></label>
  <br>
  <button type="submit" onclick = "javascript:progress()">Submit</button>
</form>
<p id= "out"></p>

希望这对您有帮助。

0
投票

我也尝试过。这种方法应该能让您了解动态创建的 DOM 元素背后的重要想法。我认为这是该算法的一个更适合生产的版本，因为只使用了原生 JS。

我的方法的主要区别在于，它完全使用动态 DOM 元素来构建表格，而不是静态 html 标记。在某些情况下，它可能更容易阅读且更灵活，特别是如果您想动态使用标签属性。我还设法将复杂性降低了 1 级。这是我的尝试，使其变得简单易读：

document.getElementById("btn").addEventListener("click", function(event) {
    progress();
}, false);

function progress(){
    var txt = document.form.txt.value;
    var line = txt.split("\n"); // every line of context
    var line_num = line.length; // total line
    
    // Build label->content association
    var inputs = {};
    for (var i = 0; i<line_num; i++)
    {
        if (line[i] != "") {
            var seq = line[i].split(" "); //seq[0]: name of label, seq[1] : context
            var label = seq[0];
            var content = seq[1];
            if (inputs[label] === undefined) {
                inputs[label] = [content];
            } else {
                inputs[label].push(content);
            }
        }
    }
    
    // For a given MxN table output
    var M = Object.keys(inputs).length;
    var N = 0; // Unknown for now
    
    var tableElement = document.createElement("table");
    tableElement.id = "out";
    
    // Generate header
    var headerElement = document.createElement("tr");
    for (var label in inputs) {
        var tdElement = document.createElement("td");
        tdElement.appendChild(document.createTextNode(label));
        headerElement.appendChild(tdElement);
        
        // calculate N dimension
        var contents = inputs[label].length;
        if (N < contents) {
            N = contents;
        }
    }
    tableElement.appendChild(headerElement);
    
    // Generate rows
    for (var i=0; i<N; i++) {
        var trElement = document.createElement("tr");
        for (var j=0; j<M; j++) {
            var tdElement = document.createElement("td");
            var label = Object.keys(inputs)[j];
            if (inputs[label].length > i) {
                var content = inputs[label][i];
                tdElement.appendChild(document.createTextNode(content));
            }
            trElement.appendChild(tdElement);
        }
        tableElement.appendChild(trElement);
    }
    
    var out = document.getElementById('out');
    out.parentNode.removeChild(out);
    document.body.appendChild(tableElement); // display the result
}
table {border-collapse:collapse;}
tr,td {border:solid 1px #000;}
td {width:100px;}
<form name = "form" enctype="multipart/form-data" id="form" method="post" onsubmit="return false;">
   <label>
<textarea name="txt" rows="20" cols = "40">
A 1
A 2
A 3
B 1
B 2
C 1
C 2
C 3
C 4
</textarea>
   </label>
   <br>
   <button id="btn" type="submit">Submit</button>
</form>
<p id= "out"></p>

希望这有帮助。祝你玩得开心！

作为参考，您可以查看 HTML 表格生成器。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.