I need a function to change any random table cell content to some other. HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="js.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen, projection">
<title>Lab1</title>
</head>
<body>
<h1>1 Laboratorinis darbas </h1>
<table id="myTable">
<caption id=a><strong>Automobiliai</caption></strong>
<tr>
<th>Modelis</th>
<th>Gamintojas</th>
<th>Metai</th>
<th>Variklio Numeris</th>
</tr>
<script>
arraytotable()
secondClick()
</script>
</table>
<button type="button" id="test" onclick="pavadinimas(); secondClick()">Mygtukas</button>
<input type="submit" class="button" value="Add another line" onclick="addField(this);" />
</body>
</html>
JS code to put an array into my table:
function arraytotable(){
var array = [
["A4", "Audi", "2015", "1234"],
["A3", "Audi", "2011", "1542"],
["335i", "BMW", "2012", "9874"],
["440d", "BMW", "2015", "1975"],
["Civic", "Honda", "2002", "6574"]]
var table = document.getElementById("myTable");
for(var i = 0; i < array.length; i++)
{
// create a new row
var newRow = table.insertRow(table.length);
for(var j = 0; j < array[i].length; j++)
{
// create a new cell
var cell = newRow.insertCell(j);
// add value to the cell
cell.innerHTML = array[i][j];
}
}
I started by including the code that would count the number of clicks done on that button, but I don't know how to access my table data in that function:
var cnt=-1;
function secondClick(){
cnt+=1;
console.log(cnt);
}
If we let the button call a function, we can use that function to count the number of clicks, and call arraytotable if needed
but I don't know how to access my table data in that function
No need, you've already used document.getElementById("myTable") to get the table inside the arraytotable function.
var cnt=0;
function onButtonClick(){
cnt+=1;
if (cnt === 2) {
arraytotable();
}
}
function arraytotable(){
var array = [
["A4", "Audi", "2015", "1234"],
["A3", "Audi", "2011", "1542"],
["335i", "BMW", "2012", "9874"],
["440d", "BMW", "2015", "1975"],
["Civic", "Honda", "2002", "6574"]
];
var table = document.getElementById("myTable");
for(var i = 0; i < array.length; i++) {
// create a new row
var newRow = table.insertRow(table.length);
for(var j = 0; j < array[i].length; j++) {
// create a new cell
var cell = newRow.insertCell(j);
// add value to the cell
cell.innerHTML = array[i][j];
}
}
}<h1>1 Laboratorinis darbas </h1>
<table id="myTable">
<caption id=a><strong>Automobiliai</caption></strong>
<tr>
<th>Modelis</th>
<th>Gamintojas</th>
<th>Metai</th>
<th>Variklio Numeris</th>
</tr>
</table>
<button type="button" id="test" onclick="onButtonClick()">Mygtukas</button>
<input type="submit" class="button" value="Add another line" onclick="addField(this);" />Used this code fragment to call the table from another function and change the value in it:
var table = document.getElementById("myTable");
table.rows[].cells[].innerHTML = array[][].bold();