JS создать таблицу из нескольких текстовых областей - PullRequest
Новая
       5

JS создать таблицу из нескольких текстовых областей

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

Я хочу создать (уникальную) таблицу из нескольких текстовых областей. Идея состоит в том, чтобы заполнить 1-й столбец из 1-й текстовой области, 2-й столбец из 2-й текстовой области и то же самое для третьей (но, в конце концов, все данные должны быть частью одной таблицы (в разных строках) ).

Пробовал этот скрипт: 

<script>
function generateTable() {
    var data = $('textarea[name=excel_data1]').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').html(table);
}
</script>

Это мое "тело" с текстовыми областями в делениях: 

  <div id=references>   <p>FI/ND:</p>
<textarea name="excel_data1" style="width:100px;height:20px;"></textarea> 
         </div>

  <div id=adresses>   <p>Adresses:</p>  
<textarea name="excel_data2" style="width:200px;height:20px;"></textarea>
         </div>

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


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

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

</center></body>

Она отлично работает из одной текстовой области, но я не могу заставить ее работать из нескольких текстовых областей.

Может ли кто-нибудь помочь? Заранее спасибо:)

(извините, я не являюсь носителем английского языка sh *)

PS: дважды пытался скопировать скрипт, меняя только имя текстовых областей, но затем перестает работать первая текстовая область: 

<script>       
  function generateTable() {

    $('textarea[name=excel_data1]').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').html(table);

    })

}

function generateTable() {

    $('textarea[name=excel_data2]').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').html(table);

    })

}      
</script>

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020

вы должны обработать по-другому. Например: 1. l oop для каждого текстового элемента (это очень просто с jQuery) - получить содержимое - добавить содержимое в строки (тег) 2. построить итоговую таблицу и добавить, где вы хотите.

Вы можете попробовать этот скрипт: 

<script>

var rows = "", table = "";
$("textarea").each(function (){
    rows += "<tr><td>"+$(this).val()+"</td></tr>";
});
table = "<table>"+rows+"</table>";
$('#excel_table1').html(table);

</script>
0 голосов
/ 20 апреля 2020

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

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