Я пытаюсь разделить текст с разделителями на несколько столбцов. До сих пор мне удалось добавить текстовые поля динамически, но мне не удалось разбить массив дважды ("\n" и разделитель) и получить столбцы. Ниже приведен образ того, что я пытаюсь сделать. Я ценю помощь.
HTML
Total columns #<input id="colNum" value="4"> Delimiter <input id="delimiter" value="—">
<button id="splitText">Split</button>
<br>
<br>
<textarea id="input">
A1—B1—C1—D1
A2—B2—C2—D2
A3—B3—C3—D3
A4—B4—C4—D4
A5—B5—C5—D5
A6—B6—C6—D6
</textarea>
<div class="tb_table"><div class="tb_tr"></div></div>
JS
var cols = $('#colNum').val();
var delimiter = $('#delimiter').val();
var text = $('#input').val().trim().split('\n');
var i;
for (i = 0; i < cols; i++) {
$('.tb_tr').append('<div class="tb_cell"><textarea id="tb_col_' + (i + 1) + '"/></div>');
col_arr = text[i].split(delimiter);
temp = "#tb_col_" + (i + 1);
$(temp).val(col_arr);
}
Вам нужно создать свои текстовые поля в первом цикле. Затем используйте другой цикл для разбора text
. В противном случае вы можете попытаться добавить данные в несуществующую область.
И в этом другом цикле вам нужна вложенная петля для прокрутки вашей разделенной строки.
$("#splitText").click(function() {
var cols = $('#colNum').val();
var delimiter = $('#delimiter').val();
var text = $('#input').val().trim().split('\n');
$('.tb_tr').html('');
var i, j;
// first loop to create a textarea for each column :
for (i = 0; i < cols; i++) {
$('.tb_tr').append('<div class="tb_cell"><textarea id="tb_col_' + (i + 1) + '"/></div>');
}
// second loop to loop through data read in the text array
for (i = 0; i < text.length; i++) {
col_arr = text[i].split(delimiter);
// nested loop to loop through the splitted string
for (j = 0; j < col_arr.length; j++) {
// using the right element name to add the text in the right textarea :
temp = "#tb_col_" + (j + 1);
$(temp).val($(temp).val() + col_arr[j] + "\n");
}
}
});
.tb_table {
width: 100%;
display: table;
}
.tb_tr {
display: table-row
}
.tb_cell {
display: table-cell;
height: 200px
}
textarea {
width: 100%;
height: 100%;
min-height: 120px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Total columns #<input id="colNum" value="4"> Delimiter <input id="delimiter" value="—">
<button id="splitText">Split</button>
<br>
<br>
<textarea id="input">A1—B1—C1—D1
A2—B2—C2—D2
A3—B3—C3—D3
A4—B4—C4—D4
A5—B5—C5—D5
A6—B6—C6—D6</textarea>
<div class="tb_table">
<div class="tb_tr">
</div>
</div>