JavaScript: создать пользовательскую таблицу, принимая строки и столбцы

Последнее обновление 9 февраля 2019 08:31:58 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

JavaScript DOM: упражнение-7 с решением

Напишите функцию JavaScript, которая создает таблицу, принимает от пользователя строку, номера столбцов и вводит номер столбца строки в качестве содержимого (например, Row-0 Column-0) ячейки.

Пример HTML-файла:


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Change the content of a cell</title>
<style type="text/css">
body {margin: 30px;}
</style>  
</head><body>
<table id="myTable" border="1">
</table><form>
<input type="button" onclick="createTable()" value="Create the table">
</form></body></html>

Пример решения : -

HTML-код:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Create a table</title> 
<style type="text/css"> 
body {margin: 30px;} 
</style>  
</head><body> 
<table id="myTable" border="1"> 
</table><form> 
<input type="button" onclick="createTable()" value="Create the table"> 
</form></body></html>

Код JavaScript:

function createTable()
{
rn = window.prompt("Input number of rows", 1);
cn = window.prompt("Input number of columns",1);
  
 for(var r=0;r<parseInt(rn,10);r++)
  {
   var x=document.getElementById('myTable').insertRow(r);
   for(var c=0;c<parseInt(cn,10);c++)  
    {
     var y=  x.insertCell(c);
     y.innerHTML="Row-"+r+" Column-"+c; 
    }
   }
}

Пример вывода:

Блок - схема:

Демонстрация в реальном времени:

См. Pen javascript-dom-упражнение-7 от w3resource ( @ w3resource ) в CodePen .

Улучшите этот пример решения и опубликуйте свой код через Disqus

Предыдущий: Напишите функцию JavaScript, которая принимает строку, столбец (для идентификации конкретной ячейки) и строку для обновления содержимого этой ячейки.
Далее: написать программу на JavaScript для удаления элементов из выпадающего списка.