Простой генератор таблицы HTML JavaScript

-1

Это генератор таблицы HTML JavaScript.Простой генератор таблицы HTML JavaScript

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

Здесь представлен proble м. У меня нет идей, чтобы закончить мою работу, но я стараюсь изо всех сил кодировать. Может кто-нибудь мне помочь?

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>

источник

2015-11-19 TC2Bee

* Подсказка: * Если вы строите таблицу, вам нужно обязательно указать начальное значение перед входом в цикл и некоторое добавление к значению внутри цикла. Начните с написания таблицы вручную для небольшого количества значений. Как только вы получите логическую идею, это будет намного проще. Удачи :) –

@ Frederik.L Есть ли у вас пример для этого? – TC2Bee

вы можете создать jsfiddle – brk

Я тоже попробовал. Такой подход должен дать вам большую идею динамически созданных элементов DOM. Я думаю, что это более удобная в работе версия алгоритма, учитывая, что используется только родной JS.

Основное отличие от моего подхода состоит в том, что он полностью работает с динамическими DOM Elements для построения таблицы вместо статической 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) { 
 
    \t   var content = inputs[label][i]; 
 
    \t   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>

Надеется, что это помогает. Приятного!

источник

2015-11-19 08:05:38

Не могли бы вы рассказать больше о своей логике? Я не могу понять ваш алгоритм, как «Build label -> content association» – TC2Bee

@ TC2Bee Основная идея здесь - создать объект json, который имеет ключи для каждой метки. Затем для каждой метки, если она не существует, создайте массив в этой позиции только с одним контентом.Иначе это означает, что массив уже существует, поэтому вы можете нажать содержимое в конце его. Имеют смысл? –

У меня есть создать образец, основанный на вашем требовании.

Проверьте этот код.

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>

Надеется, что это поможет.

источник

2015-11-19 04:29:32 balachandar

Не могли бы вы объяснить, как это работает при определении ценности? – TC2Bee

Сначала я нашел уникальные значения и сохранил в переменной uniqueValue. как A, B, C. Также я сохранил эквивалентное значение для многомерного массива. Используя многомерный массив, я создал таблицу. – balachandar

Простой генератор таблицы HTML JavaScript

ответ

Смежные вопросы