Кнопка которая задает массив

466

19 января 2017, 02:37

Создал функцию которая создает таблицу и передал ей массив , далее создал 2 инпута и кнопку. Как же задать массив написав его значения инпута после которого нажав на кнопку это сработало.

function createTable(tableData) { 
  var table = document.createElement('table'); 
  var tableBody = document.createElement('tbody'); 
 
 
  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); 
} 
 
var a = [["0", "0", "0",], ["0", ,"0", "0"]]; 
 
createTable(a);

	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>

Answer 1

Как-то так

document.querySelector(".btn").addEventListener("click", function() {
    var rows = +document.querySelector(".col1").value;
    var cols = +document.querySelector(".col2").value;
    var row_arr = [];
    var col_arr = [];
    for (var i = 0; i < rows; i++) {
        var col_arr = [];
        for (var j = 0; j < cols; j++) {
            col_arr.push(0); // содержимое ячейки
        }
        row_arr.push(col_arr);
    }
    createTable(row_arr);
});

Answer 2

Вам следует прописать у тега button атрибут onclick, а в нем указать ту функцию которую хотите вызвать по елику на кнопку.

function createTable(tableData) { 
  var table = document.createElement('table'); 
  var tableBody = document.createElement('tbody'); 
 
 
  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); 
}

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; 
	 
	}

<html> 
 
  <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
  </head> 
 
  <body> 
    <input type="text" class="col1"> 
    <input type="text" class="col2"> 
    <button class="btn" onclick='createTable([["0", "0", "0",], ["0", ,"0", "0"]])'>Go</button>  
     
  </body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Свернуть окно с помощью JQ вниз

ПриветПодскажите есть ли функция которая скрывает блок вниз-направо и открывает вверх-налево? Если нет, то как можно реализовать? Мне нужно...

425

HTML

CSS. Цвет картинки как шрифт. Инверсия

Проблема в следующем: Есть текст-ссылка, цвет шрифта - синий, цвет фона - белый

623

TCP: Стоит ли использовать Out-Of-Band? Можно ли на 1 сокет создать 2 потока recv-recv или send-send, если один из recv (send) будет OOB?

Есть heartbeat между сервером и клиентомЕсть команды которые шлются на клиент и на которые шлются ответы на сервер

454

подобие include c#, wpf

Добрый день, есть TabPanel и 3 TabItem'a, кода в них довольно много, поэтому хочется их как-то разделить, возможно ли в c# сделать чтобы на каждый tabItem...

443