#javascript #html #dom
#javascript #HTML #dom
Вопрос:
В настоящее время я застрял на проблеме, которая требует от меня создания таблицы умножения на основе ввода пользователя, однако я должен использовать DOM для создания и редактирования таблицы. Я могу создавать таблицы, но мне трудно понять, как добавлять числа.
Вот ссылка на страницу, чтобы вы могли увидеть, как она выглядит на данный момент.
<body>
<h1>Brandon Wong</h1>
<input id="num1"> rows x <input id="num2"> columns <input type="button" id="show" value="Show Table">
<div id = "tablez"></div>
<script>
document.querySelector('input[type]').addEventListener('click', show_table);
function show_table() {
// get user's input
const num1 = document.querySelector('#num1').value;
const num2 = document.querySelector('#num2').value;
//checks user's input
//seems to not let you click "OK" sometimes, pressing Enter gets rid of prompt
if (isNaN(num1) || isNaN(num2)){
alert("Must input number");
return false;
}
else{
if ((num1 < 1 || num1 > 9) || (num2 < 1 || num2 > 9) ){
alert("Please enter a number between 1 and 9");
}
else {
const rows = [];
const columns = [];
for (var i = 0; i < num1; i ){
rows[i] = (i 1);
//alert(rows[i]);
}
for (var i = 0; i < num2; i ){
columns[i] = (i 1);
//alert(columns[i]);
}
//create table
var table = document.createElement('table');
table.setAttribute('border', '1');
for (i = 0; i <= num1; i ){
var tr = document.createElement('tr');
for (j = 0; j <= num2; j ){
var td = document.createElement('td');
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("tablez").appendChild(table);
}
}
}
</script>
</body>
Вот как должен выглядеть результат.
Любая помощь приветствуется, спасибо!
Комментарии:
1. Не могли бы вы также добавить свой текущий результат? Когда я смотрю на код, я думаю, что вы получаете ошибку во время выполнения
rows[i] = (i 1);, но будет легче помочь, если предоставить дополнительную информацию о том, что не работает. Вы говорите, что можете создать таблицу, поэтому я предполагаю, что вы можете создать правильное количество столбцов и строк, но цифры не отображаются, я прав?
Ответ №1:
может быть, вы можете попробовать этот способ
document.querySelector('input[type]').addEventListener('click', () => {
const num1 = document.querySelector('#num1').value;
const num2 = document.querySelector('#num2').value;
if (isNaN(num1) || isNaN(num2)) {
alert("Must input number");
return false;
}
if ((num1 < 1 || num1 > 9) || (num2 < 1 || num2 > 9)) {
alert("Please enter a number between 1 and 9");
return false;
}
let html = '<table border="1">';
for (let i = 0; i <= num1; i ) {
const label = i === 0 ? "" : i;
html = `<tr><td>${label}</td>`;
const multipler = i === 0 ? 1 : i;
for (let j = 1; j <= num2; j ) {
html = `<td>${multipler * j}</td>`;
}
html = "</tr>";
}
document.getElementById("tablez").innerHTML = html '</table>';
}); <h1>Brandon Wong</h1>
<input id="num1"> rows x <input id="num2"> columns <input type="button" id="show" value="Show Table">
<div id="tablez"></div> Ответ №2:
Итак, я смог это выяснить. Это немного запутанно, но оно выполняет свою работу так, как я хочу, чтобы вывод отображался так, как показано на скриншоте выше. То, что я сделал, это использовал несколько циклов for, чтобы иметь возможность выводить его вместо того, чтобы пытаться втиснуть все в один, что теперь, оглядываясь назад, было довольно понятно.
//create headers
var tr = document.createElement('tr');
//adds blank spot in first row
var thblank = document.createElement('th');
thblank.textContent = " ";
tr.appendChild(thblank);
//adds column headers
for (i = 0; i < num2; i ){
var th = document.createElement('th');
th.textContent = i 1;
tr.appendChild(th);
}
table.appendChild(tr);
for (i = 0; i < num1; i ){
//creates tr for entire row of data
var tr = document.createElement('tr');
//creates the left most margin of numbers for each row
var tdfirst = document.createElement('td');
tdfirst.textContent = i 1;
tdfirst.style.fontWeight = 'bold';
tr.appendChild(tdfirst);
//computation of multiplication table
for (j = 0; j < num2; j ){
var td = document.createElement('td');
td.textContent = ((i 1) * (j 1));
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("tablez").appendChild(table);
Комментарии:
1. Я рад, что вы смогли разобраться в этом самостоятельно. Хорошая работа и удачи: D Есть много способов прийти к решению. У каждого решения есть свои плюсы и минусы. Обычно, если вам нужно эффективное решение, читаемость и удобство обслуживания будут страдать, и наоборот.
Ответ №3:
Вам не нужны массивы столбцов и строк, но я думаю, что вы получаете ошибку времени выполнения, если используете их.
const rows = [];
const columns = [];
for (var i = 0; i < num1; i ){
rows[i] = (i 1); // runtime error here, because rows is empty. Array out of bounds error maybe.
//alert(rows[i]);
}
for (var i = 0; i < num2; i ){
columns[i] = (i 1);
//alert(columns[i]);
}
Вы могли бы заменить его на
const rows = [];
const columns = [];
for (var i = 0; i < num1; i ){
rows.push((i 1)); // add to existing array instead of assigning index that has not been created yet.
}
for (var i = 0; i < num2; i ){
columns.push((i 1))
}
Внутри функции CreateTable вы никогда не присваиваете каждой ячейке значение. Я не дам вам ответа, но дам вам подсказку, поскольку этот вопрос кажется заданием.
var table = document.createElement('table');
table.setAttribute('border', '1');
for (i = 0; i <= num1; i ){
var tr = document.createElement('tr');
for (j = 0; j <= num2; j ){
var td = document.createElement('td');
// Here, you need to add a value yo your cell by multiplying the column and row values
tr.appendChild(td);
}
table.appendChild(tr);
}
РЕДАКТИРОВАТЬ: Вот CodePen с неполным результатом, но, надеюсь, этого достаточно, чтобы помочь вам понять, как пометить верхнюю строку и самый левый столбец. Из комментария мне кажется, что вы боретесь только с этой частью.
На следующем рисунке я пометил нули для подсчета строк и столбцов розовым цветом. Почему все нули? Поскольку вы начинаете цикл с индексом 0, и (0*j === 0) и (0*i===0) , поэтому каждый раз, когда индекс находится в первой строке или столбце, наш индекс равен нулю.
Если мы посмотрим на строку и столбец, отмеченные зеленым цветом, разве это не те числа, которые мы хотим поместить в первую строку и столбец? Что, если мы попытаемся скопировать эти числа, но только на первой итерации цикла? Или, может быть, мы можем ввести правильные значения при определенных условиях?
Комментарии:
1. Я ценю продолжение. Итак, я понимаю, что мне нужно ввести значения. Однако я застрял на том, как я должен получить таблицу, похожую на картинку, которую я включил в свой исходный пост. Мой первоначальный мыслительный процесс заключался в том, что я мог бы попробовать использовать значения num2 в качестве заголовков таблицы. Должен ли я создать отдельный цикл для создания ответов?