a bit new to jquery I have found this fiddle where I can edit and add both rows and columns I want the user to be able to only edit the number of rows only and have a set number of 4 columns?
https://jsbin.com/dehove/1/edit?html,css,js,console,output
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Set Rows:<br>
<input type="text" id="setRows">
<br>
Set Columns:<br>
<input type="text" id="setColumns">
<button type='button'>Create Table</button>
<p id = "demo1"></p>
<p id = "demo2"></p>
</body>
</html>
jQuery
$(function(){ // DOM ready
$("button").click(function(){
var setRows = +$("#setRows").val();
var setColumns = +$("#setColumns").val();
var table = "<table>";
for (var i=0; i<setRows; i++){
table += "<tr>";
for (var j = 0; j < setColumns; j++) table += "<td>column</td>";
table += "</tr>";
}
table += "</table>";
$("p:last").after(table);
});
});
You need to change the value of setColumns to 4
var setColumns = 4;
Also delete the input for the columns
Your full HTML file looks like this
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Set Rows:<br>
<input type="text" id="setRows">
<br>
<button type='button'>Create Table</button>
<p id = "demo1"></p>
<p id = "demo2"></p>
</body>
</html>
And This is the javascript
$(function(){ // DOM ready
$("button").click(function(){
var setRows = +$("#setRows").val();
var setColumns = 4;
var table = "<table>";
for (var i=0; i<setRows; i++){
table += "<tr>";
for (var j = 0; j < setColumns; j++) table += "<td>column</td>";
table += "</tr>";
}
table += "</table>";
$("p:last").after(table);
});
});
This is the js bin
Hope this helps :)
Related
So, basically i have a textbox and file upload button . What i want when user enter integer in textbox for eg :10 then i want to display file upload button 10 times.
Here is a working demo hope it will helpful for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function AppendRow(e) {
var val = e.value;
if (val !== "") {
var html ='';
for (var i = 0; i < val; i++) {
html +='<input type="file" id="file">';
}
$("#append").empty().append(html);
}
}
</script>
</head>
<body>
<input type="text" id="input1" onkeyup="AppendRow(this)"/>
<div id="append">
<div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
var val = $(this).val();
if (val !== "") {
var html;
for (var i = 0; i < val; i++) {
html = '<input type="file" id="file">';
$("#append").append(html);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="input" />
<div id="append">
</div>
</body>
</html>
Please use the following code
<input [(ngModel)]="count" />
<div *ngFor="let item of [].constructor(count); ">
<input type='file'>
</div>
start = document.forms[0].start,
end = document.forms[0].end,
result = document.getElementById('result'),
btn = document.getElementById('btn'),
selector = document.getElementById('selector'),
i = start.value;
btn.onclick = ()=> {
"use strict";
for (i; i < end.value ; i++) {
selector.innerHTML += '<option>' + i + '</option>';
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>challenge</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="selector.css" />
</head>
<body>
<header>
<h1>challenge 2 </h1>
<h2>Create an HTML select</h2>
</header>
<section id="input">
<div class="container">
<form>
<input type="text" name="start" id="start" >
<input type="text" name="end" id="end">
<button value="generate" id="btn"> generate</button>
</form>
</div>
</section>
<section id="result">
<select name="years" id="selector">
</select>
</section>
<script src="selector.js"></script>
</body>
</html>
It is supposed to create a new <option> for my <select>, but it executes for 1s only, and then every thing disappears.
I tried to print i on the console but even on the console make the results and every thing was gone.
I am sure I did every thing good so what is the solution to make it work here?
The form is being submitted when you click the button.
onload event can be used to set the click event of the button.
Prevent the submit:
<form onsubmit="return false;">
JS:
window.onload = function() {
btn = document.getElementById('btn');
btn.onclick = function() {
start = document.forms[0].start;
end = document.forms[0].end;
result = document.getElementById('result');
selector = document.getElementById('selector');
i = start.value;
for (i; i < end.value ; i++) {
selector.innerHTML += '<option>' + i + '</option>';
}
}
}
start = document.forms[0].start,
end = document.forms[0].end,
result = document.getElementById('result'),
btn = document.getElementById('btn'),
selector = document.getElementById('selector'),
i = start.value;
btn.onclick = ()=> {
'use strict';
for (i; i < end.value ; i++) {
selector.innerHTML += '<option>' + i + '</option>';
}
}
<section id="input">
<div class="container">
<form>
<input type="text" name="start" id="start" >
<input type="text" name="end" id="end">
<button type="button" value="generate" id="btn"> generate</button>
</form>
</div>
</section>
<section id="result">
<select name="years" id="selector">
</select>
</section>
Use type="button" into your button.
as simple example on your code, just add parameter event, and prevent defaults event of form submit, you can also change the type of
<button value="generate" id="btn" type='button'> generate</button>
btn.onclick = (event)=> {
"use strict";
for (i; i < end.value ; i++) {
selector.innerHTML += '<option>' + i + '</option>';
}
event.preventDefault();
}
If you are trying to add a new option to the select use the "appendChild()" function:
var form = document.getElementByTagName("form")[0];
var btn = document.getElementById('btn');
//To avoid refresh the page when the form is submited.
form.addEventListener("click", function(e){e.preventDefault()},false);
btn.onclick = () => {
var result = document.getElementById('selector'),
var option= document.createElement("option");
option.innerHTML = "some text";
result.appendChild(option);
}
This wild add a new option in the select each time you click the add button
I am making a web page using HTML and js following is the code for that,
essentially I want to store the numbers generated by function and show it in column 6, so I am storing it in the array a and show it in column 6. But when I write to add the number for loop stops right there and control exits from the loop. ie. only one row and one column is displayed like
uid day time source destination bus
2
rand.html
<!DOCTYPE html>
<head>
<script type="text/javascript">
var abc = 0;
a = new Array();
var b = 0;
//Returns a random number
function CreateLottoValues()
{
return Math.floor(Math.random() * 20 + 1);
}
//create table
function UpdateTable()
{
document.write("<table border=1 id='myTable' > ")
document.write(" <tr><td > uid</td><td > day</td><td
> time</td><td > source</td><td > destination</td> <td
> bus</td></tr> ")
for (row=2; row<=30; row++) {
document.write("<tr>")
for (col=1; col<=6; col++) {
if(col==1){
document.write("<td >" +row+ "</td>")
}
else if(col==6){
for (var i = 0; i <= a.length; i++) {
document.write("<td>" + a[i] +"</td>")
}
}
else{
abc = CreateLottoValues();
a.add(abc);
//tmp =row + col;
//document.getElementById(tmp).innerHTML = CreateLottoValues();
document.write("<td >" + abc + "</td>")
}
}
document.write("</tr>")
}
document.write("</table>")
}
</script>
</head>
<body>
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
<p id="demo"></p>
</div>
</div>
<input id="btn" type="button" value="Re-generate Numbers"
onClick="UpdateTable()" />
</center>
</body>
</html>
Can anyone help me? thank you for your suggestions.
On closer inspection, I found that your program won't run correctly because of this line:
a.add(abc);
This is because the variable a is an array, and to add elements to an array you use the push function
Replace a.add(abc) with a.push(abc). I've also made a few other changes which you can understand by comparing this with your code:
<!DOCTYPE html>
<head>
<script type="text/javascript">
var abc = 0;
a = new Array();
var b = 0;
//Returns a random number
function CreateLottoValues()
{
return Math.floor(Math.random() * 20 + 1);
}
//create table
function UpdateTable()
{
document.write("<table border=1 id='myTable' > ")
document.write(" <tr><td > uid</td><td > day</td><td> time</td><td > source</td><td > destination</td> <td> bus</td></tr> ")
for (row=2; row<=30; row++) {
document.write("<tr>")
for (col=1; col<=6; col++) {
if(col==1){
document.write("<td >" +row+ "</td>")
}
else if(col==6){
document.write("<td>");
for (var i = 0; i < a.length; i++) {
document.write(a[i])
}
document.write("</td>");
a = new Array();
}
else{
abc = CreateLottoValues();
a.push(abc);
//tmp =row + col;
//document.getElementById(tmp).innerHTML = CreateLottoValues();
document.write("<td >" + abc + "</td>")
}
}
document.write("</tr>")
}
document.write("</table>")
}
</script>
</head>
<body>
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
<p id="demo"></p>
</div>
</div>
<input id="btn" type="button" value="Re-generate Numbers"
onClick="UpdateTable()" />
</center>
</body>
</html>
Say I have a textfield where the dimensions of the table are given. like 2 3
now I need to write a function that creates a table out of div-tags with those dimensions. The table has to be inserted in the <div id="output"> -element
I was thinking of making a string with osme for-loops that looks like this
<div>
<div> </div>
<div> </div>
</div>
<div>
... (more columns)
</div>
So that looks like a sequence of div-tags and afterwards I would convert this to html and insert it.
But isn't there a more efficient way?
In your Javascript,
<script type="text/javascript">
var rows,cols,str="";
function generateTable()
{
rows = documnt.getElementById('rows').value;
cols = documnt.getElementById('cols').value;
str ="<table>"
for(var i=0;i<rows;i++)
{
str = str+"<tr>";
for(vat j=0;j<cols;j++)
{
str = str+"<td></td>";
}
str =str+"</tr>";
}
str = str + "</table>;
documnt.getElementById('output').innerHTML = str;
}
</script>
In your HTML,
<input type="number" id="rows" placeholder="Number of rows" />
<input type="number" id="cols" placeholder="Number of cols" />
<input type="button" id="submit" value="Submit" onClick="generateTable();" />
<br>
<br>
<div id="output"></div>
Something like this maybe:
var rows = 3; //these would be populated by your text field entries
var columns = 2;
function makeTable() {
html = '<table>';
for(var i=0; i<rows; i++) {
html += '<tr>';
for(var j=0; j<columns; j++) {
html += '<td><p>Some Data</p></td>';
}
html += '</tr>';
}
html += '</table>';
document.getElementById("output").innerHTML = html;
}
table, td {
border: 1px solid black; padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table Maker</title>
</head>
<body>
<div id="output" onClick="makeTable()"><h1>Click me to make a table!</h1></div>
</body>
</html>
I know this has come up a lot of times and I have searched all over stack overflow. I have created a working Javascript function to get the <input> tag values within each row of a table.
However, when I include a <tbody> tag (which is required for row sorting), the Javascript code will not work and I have no idea why?
Please see the code below:
function writeXML() {
var table = document.getElementById('table_assoc');
alert(table);
var rCount = document.getElementById('tbody_id').rows.length;
alert(rCount);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var FILENAME = "c:/XML.xml";
var file = fso.CreateTextFile(FILENAME, true);
file.WriteLine('<?xml version="1.0" encoding="utf-8"?>\n');
file.WriteLine('<Seating_Plan>\n');
for (var i = 1; i < rCount; i++) {
var id = table.rows[i].cells[0].children[0].value; <-- Cant Find Table reference when <tbody> tag included.
var deptcode = table.rows[i].cells[1].children[0].value;
var name = table.rows[i].cells[2].children[0].value;
var role = table.rows[i].cells[3].children[0].value;
var desc = table.rows[i].cells[4].children[0].value;
var image = table.rows[i].cells[5].children[0].value;
var asdir = table.rows[i].cells[6].children[0].value;
file.WriteLine('<Person id="' + id + '"><Dept>' + deptcode + '</Dept><Name>' + name + '</Name><Description>' + desc + '</Description><Role>' + role + '</Role><Image><image href="' + image + '"/></Image><AssociateDir><AssociateDir href="' + asdir + '"/></AssociateDir></Person>');
}
file.WriteLine('</Seating_Plan>');
file.Close();
}
How do I get this to work when including a tbody tag?
==================================================================
UPDATE:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="Admin_Javascript.js"></script>
</head>
<body>
<div id="Header_Logo" ></div>
<div id="Header_Logo2">BMW UK</div>
<div id="Admin_Header">BMW LAYOUT EDITOR</div>
<div id="Admin_Nav">
<a id="btn_xml" class="Admin_Nav_Buttons">XML</a>
<a class="Admin_Nav_Buttons">Layout</a>
</div>
<div id="Admin_XML">
<div id="XML_Buttons2">LOAD</div>
<div id="XML_Buttons" onClick="writeXML()">SAVE</div>
<span> </span>
<p class="Admin_headers">Departments</p>
<div id="Admin_Dept_Container"></div>
<p class="Admin_headers">Associates</p>
<div id="Admin_Associate_Container">
<table id="table_assoc">
<tbody id="tbody_id" >
<tr><td><input value="ID"></td></tr>
<tr><td><input value="deptcode"></td></tr>
<tr><td><input value="name"></td></tr>
<tr><td><input value="role"></td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
There is also a collection of tBodies, you can get the one by its index:
var id = table.tBodies[0].rows[i].cells[0].children[0].value;