QUESTIONS CENTRECategory: htmlHow to create whith javascript a button to create automatic tables (rows and columns)
ZENHOST Support Staff asked 10 years ago

To create a javascript button with also stating the number of columns and rows, it can be done with the following code:


This code includes: custom row(s) input – custom column(s) input – deletion of top row
ps Rember to change the color of the table: default is #ff9966


<!DOCTYPE html>

<p id=”p1″> <b>Enter the no of row and column to create table:</b>
<th>No. of Row(s) </th>
<th>No. of Column(s)</th>
<td><input type=”text” id=”row” value=”4″> X </input></td>
<td><input type=”text” id=”col” value=”7″></input></td>
<button id=”create” onclick=”create()”>create table</button>

<input type=”button” value=”Reload page” onclick=”reloadPage()”>

function create()
var row = parseInt(document.getElementById(“row”).value);
var col = parseInt(document.getElementById(“col”).value);
var tablestart=”<table id=myTable border=1>”;
var tableend = “</table>”;
var trstart = “<tr bgcolor=#ff9966>”;
var trend = “</tr>”;
var tdstart = “<td>”;
var tdend = “</td>”;
var data=”data in cell”;

var str1=tablestart + trstart + tdstart + data + tdend + trend + tableend;

for (var r=0;r<row;r++)
for(var c=0; c<col; c++)
document.write(tdstart+”Row.”+r+” Col.”+c+tdend);

var s=”<button id=”+”delete”+” onclick=”+”deleteTable()”+”>Delete top Row </button>”;

var relod=”<button id=”+”relod”+” onclick=”+”reloadPage()”+”>Reload Page </button>”;

function deleteTable()
{var dr=0;
if(confirm(“It will be deleted..!!”))

function reloadPage()