JavaScript: генерировать столбец таблицы на столбец - PullRequest
Новая
       6

JavaScript: генерировать столбец таблицы на столбец

1 голос
/ 22 апреля 2020

Я новичок в кодировании, и я действительно застрял. Вот ситуация: я создал скрипт для генерации уникальной таблицы из нескольких текстовых областей, и это отлично работает. Проблема в том, что мне нужно заполнить таблицу определенным образом c:

  • данные из 1-й текстовой области = 1-й столбец
  • данные из 2-й текстовой области = 2-й столбец
  • данные из 3-го текстового поля = 3-й столбец

(но все столбцы должны быть частью одной таблицы). Сейчас все данные из 3 текстовых областей отображаются один под другим (в строках). а не столбцы) и я просто не могу понять это.

Пока это мой сценарий: 

<script>
function generateTable() {

$('textarea').each(function(){

  var data = $(this).val(); console.log(data);
  var rows = data.split("\n");
  var table = $('<table />');

    for(var y in rows) {
        var cells = rows[y].split("\t");
        var row = $('<tr />');
        for(var x in cells) {
            row.append('<td>'+cells[x]+'</td>');
        }
        table.append(row);
    }
    $('#excel_table1').append(table);
})
}
</script>

Это мое «тело» с текстовыми областями в div: 

<div id=street>   <p>street:</p>
<textarea name="data1" style="width:100px;height:20px;"></textarea> 
</div>

<div id=city>   <p>city:</p>  
<textarea name="data2" style="width:200px;height:20px;"></textarea>
</div>

<div id=country>   <p>country:</p>  
<textarea name="data3" style="width:100px;height:20px;"></textarea>
</div>
<br>
<input id=bouton1 type="button" onclick="javascript:generateTable()" value="Generate 
table"/>

И это таблица, сгенерированная в другом "теле": 

<body><center>

<p>Table:</p>
<div id="excel_table1"></div>

</center></body>

Может ли кто-нибудь помочь? Ответ может быть очень простым, но я просто пытаюсь учиться на лету и мало что знаю о JS! Заранее спасибо:)

Ответы [ 2 ]

1 голос
/ 22 апреля 2020

На вашей странице может быть только один элемент <body>. Поэтому вам нужно будет поместить и текстовые области, и таблицу в один и тот же элемент тела.

Проблема с вашим сценарием состояла в том, что вы создали таблицу и добавили ее в свой div для каждой текстовой области. Вы должны сделать это до и после итерации текстовых областей.

Я создал фрагмент, изменяющий именно это. Надеюсь, это поможет! 

function generateTable() {
  var table = $('<table></table>');
  $('textarea').each(function() {
    var data = $(this).val();
    console.log(data);
    var rows = data.split("\n");

    for (var y in rows) {
      var cells = rows[y].split("\t");
      var row = $('<tr />');
      for (var x in cells) {
        row.append('<td>' + cells[x] + '</td>');
      }
      table.append(row);
    }
  })
  $('#excel_table1').append(table);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=street>
  <p>street:</p>
  <textarea name="data1" style="width:100px;height:20px;"></textarea>
</div>

<div id=city>
  <p>city:</p>
  <textarea name="data2" style="width:200px;height:20px;"></textarea>
</div>

<div id=country>
  <p>country:</p>
  <textarea name="data3" style="width:100px;height:20px;"></textarea>
</div>
<br>
<input id="bouton1" type="button" onclick="generateTable()" value="Generate 
table" />

<p>Table:</p>
<div id="excel_table1"></div>
0 голосов
/ 23 апреля 2020

Неважно, я понял это! : D

Вот скрипт, который берет данные из нескольких текстовых областей и помещает их в разные столбцы одной таблицы: 

<script src="jquery-3.5.0.js" type="text/javascript" charset="utf-8"></script>  
         <script>

function generateTable() {
     var n=1;
     var rows=[];
     var lng=0;
    $('textarea').each(function(){
      var data = $(this).val();
      var rowData = data.split("\n");
      rows[n] = rowData;
      lng = rowData.length;
      n++;
    })
     var table = $('<table />');
               k=0;
               while (k < lng) {
               var row = $('<tr />');
                    for(var i = 1; i < rows.length; i++) {

                    var singleRow = rows[i];

                          row.append('<td>'+singleRow[k]+'</td>')

                    }
                        table.append(row);
                k++;
              }

        $('#excel_table1').append(table);

}    
    </script>
...