Как задать координаты массива в input-е Js

535

26 января 2017, 04:24

Написал функцию, которая рисует таблицу и передал в нее массив. С помощью 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>

Answer 1

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

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

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

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

table.rows[rowIndex].cells[columnIndex]

Answer 2

Задайте сначала 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>

Answer 3

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

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>