Я хотел бы прочитать все значения из текстового поля/текстового поля по отдельности, а затем записать их в таблицу:
Пример:
This is an example of a text I want to read out.
Выход:
Как я могу использовать цикл для чтения текстового поля/текстового поля? То есть всякий раз, когда появляется пробел, новое последующее значение должно быть в новой строке.
Пожалуйста, посетите справочный центр , пройдите тур , чтобы узнать, что и Как спросить . Проведите небольшое исследование, поищите связанные темы на SO; если вы застряли, опубликуйте минимально воспроизводимый пример вашей попытки, отметив ввод и ожидаемый результат с помощью редактора фрагментов [<>]
.
Нить:
var table = document.getElementById("table");
var phrase = "This is an example of a text I want to read out";
var words = phrase.split(" ");
for (var i = 0; i < words.length; i++) {
var tableCol =
`<tr>
<td>${i+1}:</td>
<td>${words[i].replace(/[\.,!\?]/g," ")}<td>
</tr>`;
document.querySelector('table tbody').innerHTML += tableCol;
}
#table {
border: 1px solid;
}
th {
border: 1px solid;
padding: 5px;
}
<table id = "table">
<thead>
<th>Number:</th>
<th>Word:</th>
<thead>
<tbody>
</tbody>
</table>
Вход:
var table = document.getElementById("table");
var myBtn = document.getElementById("myBtn");
var myInput = document.getElementById("myInput");
myBtn.addEventListener('click', () => {
document.querySelector('tbody').innerHTML = '';
var phrase = myInput.value;
var words = phrase.split(" ");
for (var i = 0; i < words.length; i++) {
var tableCol =
`<tr>
<td>${i+1}:</td>
<td>${words[i].replace(/[\.,!\?]/g," ")}<td>
</tr>`;
document.querySelector('tbody').innerHTML += tableCol;
}
});
input {
margin-bottom: 10px;
width: 300px;
height: 25px;
}
#table {
border: 1px solid;
}
th {
border: 1px solid;
padding: 5px;
}
<input id = "myInput" type = "text">
<button id = "myBtn">Create Table</button>
<table id = "table">
<thead>
<th>Number:</th>
<th>Word:</th>
<thead>
<tbody>
</tbody>
</table>
Вы пропустили знаки препинания
Короче и убрать знаки препинания
const str = `This is an example of a text I want to read out.`;
document.querySelector('table tbody').innerHTML = str.split(" ")
.map((word,i) => `<tr><td>${i+1}:</td><td>${word.replace(/[\.,!\?]/g,"")}<td></tr>`)
.join("");
<table id = "table">
<thead>
<th>Number:</th>
<th>Word:</th>
<thead>
<tbody>
</tbody>
</table>