кодесурса
«JavaScript

JavaScript: создайте функцию для обновления содержимого определенной ячейки таблицы

script1adsense2code
script1adsense3code

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

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

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


<!DOCTYPE html>
<html><head>
<meta charset=utf-8 /> <title>Change the content of a cell</title> </head><body> <table id="myTable" border="1"> <tr><td>Row1 cell1</td> <td>Row1 cell2</td></tr> <tr><td>Row2 cell1</td> <td>Row2 cell2</td></tr> <tr><td>Row3 cell1</td> <td>Row3 cell2</td></tr> </table><form> <input type="button" onclick="changeContent()" value="Change content"> </form></body></html>

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

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"> 
<tr><td>Row1 cell1</td> 
<td>Row1 cell2</td></tr> 
<tr><td>Row2 cell1</td> 
<td>Row2 cell2</td></tr> 
<tr><td>Row3 cell1</td> 
<td>Row3 cell2</td></tr> 
</table><form> 
<input type="button" onclick="changeContent()" value="Change content"> 
</form></body></html>

Код JavaScript:

function changeContent()
{
rn = window.prompt("Input the Row number(0,1,2)", "0");
cn = window.prompt("Input the Column number(0,1)","0");
content = window.prompt("Input the Cell content");  
var x=document.getElementById('myTable').rows[parseInt(rn,10)].cells;
x[parseInt(cn,10)].innerHTML=content;
}

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


Блок - схема:

«Блок-схема:

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

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


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

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

Каков уровень сложности этого упражнения?

Новый контент: Composer: менеджер зависимостей для PHP , R программирования


script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code