Dynamic Table Generator

Developer
Miguel Ferreira
Size
2,159 Kb
Views
4,048
  1. Dynamic Table Generator Previews
  2. Dynamic Table Generator HTML Codes
  3. Dynamic Table Generator CSS Codes
  4. Dynamic Table Generator JS Codes

How do I make an dynamic table generator?

What is a dynamic table generator? How do you make a dynamic table generator? This script and codes were developed by Miguel Ferreira on 26 January 2023, Thursday.

Dynamic Table Generator Previews
IQ Test

Dynamic Table Generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic Table Generator</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span id="cols">Columns:</span>
<select id="coluna"> <option disabled selected>Select</option> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option>
</select>
<span class="ros">Rows:</span>
<select id="fila"> <option disabled selected>Select</option> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option>
</select>
<button class="criar">Generate</button>
<table id="tabelas"></table> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dynamic Table Generator - Script Codes CSS Codes

body{ background:oldlace; font-family: "Eurostile LT Std";
}
select{ margin-right:40px; width:80px; height:50px; border:0px solid;
}
td, th, table { border: solid 1px; padding: 5px;
}

Dynamic Table Generator - Script Codes JS Codes

$(document).ready(function () { String.prototype.repeat = function(n) { return new Array(n + 1).join(this); } $('.criar').click(function () { $('table').empty(); var col = parseInt($('#coluna').val()); var row = parseInt($('#fila').val()); var head = "<th>Heading</th>".repeat(row); var tableHead = "<tr>" + head + "</tr>" var tableData = "<td>Cookies</td>".repeat(row); var tableRow = "<tr>" + tableData + "</tr>"; var table = tableRow; $('#tabelas').append(tableHead); for (i = 0; i < col; i++) { $('#tabelas tr:last').after(table); } });
})
Dynamic Table Generator - Script Codes
Dynamic Table Generator - Script Codes
Home Page Home
Developer Miguel Ferreira
Username angus
Uploaded January 26, 2023
Rating 3
Size 2,159 Kb
Views 4,048
Do you need developer help for Dynamic Table Generator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Miguel Ferreira (angus) Script Codes
Name
Calculator
A Pen by Miguel Ferreira
Hover menu CSS
Comparing values to items in array
Images hover with zoom effect
DropDown Menu
Slider
Basic Caroussel Concept
Prespectives
Slider modelo
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!