1

Написал функцию, которая рисует таблицу и передал в нее массив. С помощью input можно рисовать строки и столбцы. Ещё добавил два input и кнопку для того, чтобы задавать координаты (ну знаете на подобие игры 'морской бой'). Как это сделать? Например ввожу значение "2" "3" ( второй столбец и 3 строка) и выводилось там значение "1"

function createTable(tableData) {
  var table = document.createElement('table');
  var tableBody = document.createElement('tbody');

  if (document.querySelectorAll('._Table').length > 0) {
    for (var i = document.querySelectorAll('._Table').length - 1; i >= 0; i--) {
      document.querySelectorAll('._Table')[i].remove();
    };
  };

  table.classList.add('_Table');

  tableData.forEach(function(rowData) {
    var row = document.createElement('tr');

    rowData.forEach(function(cellData) {
      var cell = document.createElement('td');
      cell.appendChild(document.createTextNode(cellData));
      row.appendChild(cell);
    });

    tableBody.appendChild(row);
  });

  table.appendChild(tableBody);
  document.body.appendChild(table);
}

document.querySelector(".btn").addEventListener("click", function() {
  var row = document.querySelector(".col1").value;
  var col = document.querySelector(".col2").value;
  var row_mas = [];
  var col_mas = [];
  for (var i = 0; i < row; i++) {
    var col_mas = [];
    for (var j = 0; j < col; j++) {
      col_mas.push(0);
    }
    row_mas.push(col_mas);
  }
  createTable(row_mas);
});
body {
  margin-top: 10%;
  margin-left: 40%;
}
th,
td {
  width: 50px;
  border: 1px solid red;
  font-size: x-large;
  color: white;
}
tbody {
  background-color: blue;
}
input {
  width: 20px;
  height: 20px;
}
<input type="text" class="col1">
<input type="text" class="col2">
<button class="btn">Go</button>
<br/>
<input type="text" class="col3">
<input type="text" class="col4">
<button class="btn2">koordinats</button>

3 ответа 3

1

Есть вариант высчитывать ячейку, непосредственно, через позиции указанные во вторых полях по индексу элементов:

function createTable(tableData) {
  var table = document.createElement('table');
  var tableBody = document.createElement('tbody');

  if (document.querySelectorAll('._Table').length > 0) {
    for (var i = document.querySelectorAll('._Table').length - 1; i >= 0; i--) {
      document.querySelectorAll('._Table')[i].remove();
    };
  };

  table.classList.add('_Table');

  tableData.forEach(function(rowData) {
    var row = document.createElement('tr');

    rowData.forEach(function(cellData) {
      var cell = document.createElement('td');
      cell.appendChild(document.createTextNode(cellData));
      row.appendChild(cell);
    });

    tableBody.appendChild(row);
  });

  table.appendChild(tableBody);
  document.body.appendChild(table);
}

document.querySelector(".btn").addEventListener("click", function() {
  var row = document.querySelector(".col1").value;
  var col = document.querySelector(".col2").value;
  var row_mas = [];
  var col_mas = [];
  for (var i = 0; i < row; i++) {
    var col_mas = [];
    for (var j = 0; j < col; j++) {
      col_mas.push(0);
    }
    row_mas.push(col_mas);
  }
  createTable(row_mas);
});

// Вот код
document.querySelector(".btn2").addEventListener("click", function() {
  var stings = document.querySelector('.col3').value,
      rows = document.querySelector('.col4').value;
  document.querySelectorAll('._Table > tbody > tr')[stings - 1].querySelectorAll('td')[rows - 1].innerHTML = 1;
});
body {
  margin-top: 10%;
  margin-left: 40%;
}
th,
td {
  width: 50px;
  border: 1px solid red;
  font-size: x-large;
  color: white;
}
tbody {
  background-color: blue;
}
input {
  width: 20px;
  height: 20px;
}
<input type="text" class="col1">
<input type="text" class="col2">
<button class="btn">Go</button>
<br/>
<input type="text" class="col3">
<input type="text" class="col4">
<button class="btn2">koordinats</button>

1

Согласно документации, событие можно обработать так:

object.addEventListener("change", function(e) { doThingsWith(e.target.value) } )

Или поместить в форму и обработать submit.

А получить значение ячейки по координатам поможет такое свойство html-таблиц:

table.rows[rowIndex].cells[columnIndex]
0

Задайте сначала id для ваших ячеек таблицы:

tableData.forEach(function(rowData,i) {
    var row = document.createElement('tr');

    rowData.forEach(function(cellData,j) {
      var cell = document.createElement('td');
      cell.id=i+'_'+j
      cell.appendChild(document.createTextNode(cellData));
      row.appendChild(cell);
    });

тогда вы без проблем их найдете по id:

   var gell = document.getElementById(row+"_"+col);
   gell.innerHTML="1"

function createTable(tableData) {
  var table = document.createElement('table');
  var tableBody = document.createElement('tbody');

  if(document.querySelectorAll('._Table').length > 0){
    for(var i = document.querySelectorAll('._Table').length - 1; i >= 0; i--){
      document.querySelectorAll('._Table')[i].remove(); 
    };
  };
  
  table.classList.add('_Table');
  
  tableData.forEach(function(rowData,i) {
    var row = document.createElement('tr');

    rowData.forEach(function(cellData,j) {
      var cell = document.createElement('td');
      cell.id=i+'_'+j
      cell.appendChild(document.createTextNode(cellData));
      row.appendChild(cell);
    });

    tableBody.appendChild(row);
  });

  table.appendChild(tableBody);
  document.body.appendChild(table);
}

document.querySelector(".btn").addEventListener("click", function() {
  var row = document.querySelector(".col1").value;
  var col = document.querySelector(".col2").value;
  var row_mas = [];
  var col_mas = [];
  for (var i = 0; i < row; i++) {
    var col_mas = [];
    for (var j = 0; j < col; j++) {
      col_mas.push(0);
    }
    row_mas.push(col_mas);
  }
  createTable(row_mas);
});

document.querySelector(".btn2").addEventListener("click", function() {
   var row = document.querySelector(".col3").value;
   var col = document.querySelector(".col4").value;
   var gell = document.getElementById(row+"_"+col);
   gell.innerHTML="1"
});
body {
  margin-top: 10%;
  margin-left: 40%;
}
th,td {
  width: 50px;
  border: 1px solid red;
  font-size: x-large;
  color: white;
}
tbody {
  background-color: blue;
}
input {
  width: 20px;
  height: 20px;
}
<input type="text" class="col1">
		<input type="text" class="col2">
			<button class="btn">Go</button>
			<br/>
			<input type="text" class="col3">
			<input type="text" class="col4">
			<button class="btn2">koordinats</button>

2
  • Выдает ошибку бро
    – Anton
    31 янв 2017 в 4:36
  • @Anton Если координаты задать верно, то не выдает. Задачи сделать проверку координат не было.
    – Crantisz
    31 янв 2017 в 6:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.