I would like to ask if you can help me fix my code. I built an HTML grid and have a button that should automatically add a new row. The function associated with the button doesn't work.
Here's the HTML code
<html>
<head>
<script src="test.js"></script>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Advertiser</th>
<th>Formato</th>
<th>Tipo</th>
<th>Autoplay</th>
<th>Audio</th>
</tr>
<tr id="row1">
<td id="advertiser_row1">
<select name="client">
<option value="Mcvities">Mcvities</option>
<option value="Enel">Enel</option>
<option value="Brita">Brita</option>
</select>
</td>
<td id="formato_row1">
<select name="formato">
<option value="intro shaa">intro shaa</option>
<option value="intro xaxis">intro xaxis</option>
<option value="carousel">carousel</option>
<option value="mid-strip">mid-strip</option>
</select>
</td>
<td id="tipo_row1">
<select name="tipi">
<option value="video">video</option>
<option value="immagine">immagine</option>
</select>
</td>
<td id="audio_row1">
<select name="audio">
<option value="video">yes</option>
<option value="immagine">no</option>
</select>
</td>
<td id="tipo_row1">
<select name="autoplay">
<option value="video">yes</option>
<option value="immagine">no</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" id="new_cl"></td>
<td><input type="text" id="new_fo"></td>
<td><input type="text" id="new_ti"></td>
<td><input type="text" id="new_au"></td>
<td><input type="text" id="new_at"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
here my js:
function add_row()
{
var new_ad=document.getElementById("new_cl").value;
var new_im=document.getElementById("new_fo").value;
var new_cp=document.getElementById("new_ti").value;
var new_st=document.getElementById("new_au").value;
var new_en=document.getElementById("new_at").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='advertiser_row"+table_len+"'>"+new_cl+"</td><td id='formato_row"+table_len+"'>"+new_fo+"</td><td id='tipo_row"+table_len+"'>"+ti_cp+"</td><td id='audio_row"+table_len+"'>"+au_cl+"</td><td id='autoplay_row"+table_len+"'>"+new_at+"</td>;
document.getElementById("new_cl").value="";
document.getElementById("new_fo").value="";
document.getElementById("new_ti").value="";
document.getElementById("new_au").value="";
document.getElementById("new_at").value="";
}
Try this:
Change: <table id="myTable">
function add_row()
{
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
cell4.innerHTML = "NEW CELL4";
}
Related
I want to know how can I link my tableheads with a select ?
Here is a screen of how it looks
I just want to add a town in a column I've chosen before.
Here is my code :
function addRow() {
var table = document.getElementById("table");
var row= table.insertRow(-1);
var column1 = row.insertCell(0);
column1.innerHTML += document.getElementById("ville").value;
}
<h2>Test</h2>
<form method="post" action="">
<select id="select">
<option selected disabled>Choose one</option>
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
<option>Option D</option>
<option>Option E</option>
</select>
<input type="text" name="ville" id="ville" />
<input type="button" onclick="addRow();" value="Save"/>
</form>
<table id="table" style="margin: 30px; border-spacing: 20px;">
<thead>
<tr>
<th>Option A</th>
<th>Option B</th>
<th>Option C</th>
<th>Option D</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST</td>
</tr>
</tbody>
</table>
You need to have the select list provide you with the column number the new text needs to go in. Something like:
function addRow() {
var table = document.getElementById("table");
var row = table.insertRow(-1);
var columnpicked = document.getElementById("select").value;
for (let i = 0; i <= columnpicked; i++) {
row.insertCell(0);
}
row.cells[columnpicked].innerHTML += document.getElementById("ville").value;
}
<h2>Test</h2>
<select id="select">
<option selected disabled>Choose one</option>
<option value=0>Option A</option>
<option value=1>Option B</option>
<option value=2>Option C</option>
<option value=3>Option D</option>
<option value=4>Option E</option>
</select>
<input type="text" name="ville" id="ville" />
<input type="button" onclick="addRow();" value="Save"/>
<table id="table" style="margin: 30px; border-spacing: 20px;">
<thead>
<tr>
<th>Option A</th>
<th>Option B</th>
<th>Option C</th>
<th>Option D</th>
<th>Option E</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEST</td>
</tr>
</tbody>
</table>
Note that you only had four columns in your example - so, I've added an Option E column to match the select list items.
I will leave the other answer there in case we need to go back to it. From your comments, I think you need to do something like:
function addRow() {
// Get the tbody element - NOTE: an id has been added to that to make it easier to find
var table = document.getElementById("tablerows");
// Get the rows in the tbody element
var rows = table.getElementsByTagName("tr");
// If there are no rows, create one
if (rows.length == 0) {
tbody.insertRow();
}
// Get the first row
var row = rows[0];
// Get the column selected by the user
var selected = document.getElementById("select").value;
// Check if the row has enough td items to put the text into the selected column
if (row.cells.length - 1 < selected) {
// If it hasn't, create them
for (let i = 0; i < selected; i++) {
let td = document.createElement("td");
row.appendChild(td);
}
}
// Get the text to be inserted
var ville = document.getElementById("ville");
// Insert the text in the selected column
row.cells[selected].innerHTML = ville.value;
}
<h2>Test</h2>
<select id="select">
<option selected disabled>Choose one</option>
<option value=0>Option A</option>
<option value=1>Option B</option>
<option value=2>Option C</option>
<option value=3>Option D</option>
<option value=4>Option E</option>
</select>
<input type="text" name="ville" id="ville" />
<input type="button" onclick="addRow();" value="Save"/>
<table id="table" style="margin: 30px; border-spacing: 20px;">
<thead>
<tr>
<th>Option A</th>
<th>Option B</th>
<th>Option C</th>
<th>Option D</th>
<th>Option E</th>
</tr>
</thead>
<tbody id="tablerows">
<tr>
<td>TEST</td>
</tr>
</tbody>
</table>
I have added an id to the tbody tag as the header row is seen as part of the table's rows collection. Doing this means that we can target only the rows on the tbody.
OK - assuming we are ok for the users to enter text directly in a cell, try:
function addRow() {
var t = document.getElementById("datarows");
var rtemplate = document.getElementById("newrow");
var r = rtemplate.content.cloneNode(true);
t.appendChild(r);
}
table {border-collapse:collapse;}
td {height:23px; background-color:white; border:1px solid black; padding:5px; width:100px; vertical-align:top;}
th {border:1px solid black; padding:5px; width:100px;}
td:focus {background-color:lightgreen;}
<b>Click on a table cell to add/edit text</b><br>or click to add a new row <button id="newrowbutton" onclick="addRow();">Add new row</button>
<hr>
<table>
<thead id="headerrow">
<tr>
<th>Option A</th>
<th>Option B</th>
<th>Option C</th>
<th>Option D</th>
<th>Option E</th>
</tr>
</thead>
<tbody id="datarows">
<tr>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
</tr>
</tbody>
</table>
<template id="newrow">
<tr>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
</tr>
</template>
The code is copied from jsfiddle, but not working in my webpage. I tried to include the script at bottom and added document.ready function
code in JSfiddle
enter link description here
HTML
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form>
<table border = "1" id = "engagements">
<tr>
<th><input type="checkbox" onclick="checkAll(this)"></th>
<th>Organization</th>
<th>Project</th>
<th>Product</th>
<th>Activity</th>
</tr>
<tr>
<td><input type="checkbox" onclick="checkAll(this)"></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<!--
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
-->
</tr>
</table>
<select name = "mode" id = "mode" onchange="addrow('engagements')">
<option value="">Add More Rows with Same Data as Above</option>
<option value="1">1 More</option>
<option value="2">2 More</option>
<option value="3">3 More</option>
<option value="4">4 More</option>
<option value="5">5 More</option>
</select>
</form>
</body>
</html>
Error in webpage
newhtml.html:43 Uncaught ReferenceError: addrow is not defined
at HTMLSelectElement.onchange (newhtml.html:43)
<script src="jquery-3.3.1.min.js">
$(document).ready(function() {
$("#mode").on('change', function () {
var rows = parseInt(this.value);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});
}
</script>
any help will be highly appreciated
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mode").on('change', function () {
var rows = parseInt(this.value);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});
});
</script>
May be you didn't import jquery properly and you have added in same script tag as comment suggested
$("#mode").on('change', function () {
var rows = parseInt(this.value);
console.log(rows);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1" id="engagements">
<tr>
<th>
<input type="checkbox" onclick="checkAll(this)" />
</th>
<th>Organization</th>
<th>Project</th>
<th>Product</th>
<th>Activity</th>
</tr>
<tr>
<td>
<input type="checkbox" onclick="checkAll(this)" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<select name="mode" id="mode">
<option value="">Add More Rows with Same Data as Above</option>
<option value="1">1 More</option>
<option value="2">2 More</option>
<option value="3">3 More</option>
<option value="4">4 More</option>
<option value="5">5 More</option>
</select>
</form>
When 'combo box' option is changed, you just declared to invoke function 'addrow' without definition.
You must reference jquery in a separate script tag before you use it like this. Then add your code below it in an another script tag
<script>
$(document).ready(function() {
$("#mode").on('change', function () {
var rows = parseInt(this.value);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});
}
</script>
By using javascript i have added new rows to the table dynamically. but i don't know how to access the data from those dynamically created rows in PHP so that i can insert them into database.
i here by giving html and java script please help me to write PHP code to extract data from dynamically created table. i can extract data from static table by using DOM object.
<form name="frmtransport" method="post" action="transportation.php" id="Form1">
<table id="Table1" name="transport">
<tr >
<td colspan="8" >
Transportation
</td>
</tr>
<tr style="height: 36px;">
<td colspan="2" Date
</td>
<td colspan="6" >
<input type="text" id="jQueryDatePicker1" name="trdate" value="25/02/2015">
</td>
</tr>
<tr>
<td>
location
</td>
<td>
no.of boxes
</td>
<td>
Gf.no
</td>
<td>
invoice no
</td>
<td>
invoice date
</td>
<td>
lorryno
</td>
<td>
vat no
</td>
</tr>
<tr>
<td >
<select name="cmblocation" size="1" id="Combobox1" style="position:relative;width:170px;height:36px;z-index:1;">
<option value="volvo">
Volvo
</option>
<option value="saab">
Saab
</option>
<option value="mercedes">
Mercedes
</option>
<option value="audi">
Audi
</option>
</select>
</td>
<td >
<input type="text" id="Editbox1" name="txtnoofboxes">
</td>
<td >
<input type="text" id="Editbox2" name="txtgrno" >
</td>
<td >
<input type="text" id="Editbox3" name="txtinvoiceno" >
</td>
<td >
<input type="text" id="Editbox4" name="txtinvoiceno" >
</td>
<td >
<input type="text" id="Editbox5" name="txtinvoiceno" >
</td>
<td >
<input type="text" id="Editbox6" name="txtinvoiceno" >
</td>
<td >
<input type="button" id="Button1" onclick="myFunction();" name="cmdadd" value="Add" >
</td>
</tr>
<tr>
<td colspan="8">
<input type="submit" value="Save" name="btnsave" id="Button1"
</td>
</tr>
</table>
</form>
JavaScript Code:
function myFunction() {
var table = document.getElementById("Table1");
//var rowc=table.rows.length;
var row = table.insertRow(4);
row.className = "rowstyle";
var cell0 = row.insertCell(0);
var element = document.getElementById("Combobox1");
var op = element.options[element.selectedIndex].text;
document.getElementById("Combobox1").value = "";
cell0.innerHTML = op;
var cell1 = row.insertCell(1);
cell1.innerHTML = document.getElementById("Editbox1").value;
document.getElementById("Editbox1").value = "";
var cell2 = row.insertCell(2);
cell2.innerHTML = document.getElementById("Editbox2").value;
document.getElementById("Editbox2").value = "";
var cell3 = row.insertCell(3);
cell3.innerHTML = document.getElementById("Editbox3").value;
document.getElementById("Editbox3").value = "";
var cell4 = row.insertCell(4);
cell4.innerHTML = document.getElementById("jQueryDatePicker2").value;
document.getElementById("jQueryDatePicker2").value = "";
var cell5 = row.insertCell(5);
cell5.innerHTML = document.getElementById("Editbox5").value;
document.getElementById("Editbox5").value = "";
var cell6 = row.insertCell(6);
cell6.innerHTML = document.getElementById("Editbox6").value;
document.getElementById("Editbox6").value = "";
var cell7 = row.insertCell(7);
cell7.innerHTML = '<input type="button" id="Button1" style="width:45px;height:35px;" value="Delete" onclick="deleteRow(this)"/>';
/* cell1.innerHTML = document.getElementsByName("txtnoofboxes").value;
cell2.innerHTML = document.getElementsByName("txtnoofboxes");*/
}
When you submit the form, only data from input fields in the form will be submitted to the server. Your code takes the entered values out of the input fields and places them in table cells, effectively removing them from the submitted data.
You need to add the values of the created rows to input fields (or use AJAX as Deepak Kamat suggested). When you add the values to an input field is up to you. You can do it:
When the user clicks add (This has the benefit of editable fields).
When the user clicks save.
The second option requires form submission via JavaScript form.submit(), but it allows you to keep the table unencumbered by lots of input fields, if that is a concern to you.
(Also, look into catching for null values so you don't create empty rows on accident)
I have a dialog pop up with drop down selects, an input box and a save button. This save button updates the parent table with the user drop down/input values, but at at end of the table. I need these values to go under the chosen father part of the table. My drop down for the father has independent IDs, I'm just not sure how to implement it. I've tried to strip my code to work in jsfiddle, but the demo won't add values to the table. Here's my code for the dialog pop up:
<script>
$("#save").click(function () {
for(var j=0;j<document.getElementsByName("select1").length;j++) {
updateParent1(document.getElementsByName("select1").item(j).value + ' ' +
document.getElementsByName("text1").item(j).value + ' - ' +
document.getElementsByName("select2").item(j).value,
document.getElementsByName("chooseFather").item(j).value);
}
});
</script>
<form method="post" name="shoreInfo">
<table>
<tr>
<td>
<select name="select1" value="1">
<option selected value="undefined">Select...</option>
<option value="Value 1 (option1)">Value 1 (option1)</option>
<option value="Value 1 (option2)">Value 1 (option2)</option>
</select>
</td>
<td>
<select name="chooseFather" value="4">
<option selected value="undefined">Select...</option>
<option id="father3">Choose to add this information under father3 row.</option>
<option id="father4">Choose to add this information under father4 row.</option>
</select>
</td>
<td>
<select name="select2" value="3">
<option selected value="undefined">Select...</option>
<option value="Value 2 (option1)">Value 2 (option1)</option>
<option value="Value 2 (option2)">Value 2 (option2)</option>
</select>
</td>
<td>
<input type="text" name="text1" value="2" class="text94 apni"/>
</td>
<td><input type="button" value="Add values to table" id="save" />
</td>
</tr>
</table>
</form>
And here's the code for the parent page:
<script>
function updateParent1(value1) {
var table = document.getElementById("shore_tab");
var rowCount = table.rows.length;
//alert(rowCount);
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = "";
var cell2 = row.insertCell(1);
cell2.innerHTML = value1;
var cell3 = row.insertCell(2);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell3.innerHTML = "<img title='remove' src='images/delete-row-icon1.png' class='sub_icon remove'/> ";
cell3.appendChild(element1);
}
</script>
<table id="shore_tab" border="1">
<tr class="row_blue_bold father" id="father3">
<td colspan="2" class="father_header">Category 3</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold father" id="father4">
<td colspan="2" class="father_header">Category 4</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
</table>
I am looking to fill 2 fields based on the selection of a dropdown. This is the code I am using now (which works but not work in my case):
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("event");
var catSelected = e.options[e.selectedIndex].value;
document.getElementById("minLvl").value=catSelected;
}
</script>
and the relevant HTML:
<table>
<tr>
<td>Event:</td>
<td>
<select name="Event" id="event" onChange="updateinput();">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
<option value="option6">option6</option>
<option value="option7">option7</option>
</select>
</td>
</tr>
<tr>
<td>Starting Time:</td>
<td><input type="text" name="dateTime"/></td>
</tr>
<tr>
<td>Level Range:</td>
<td><input type="text" size="3" maxlength="3" id="minLvl"> - <input type="text" size="3" maxlength="3" id="maxLvl"></td>
</tr>
<tr>
<td>Notes:</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>Create Event:</td>
<td><input type="button" value="Create event!"></td>
</tr>
</table>
I know I can use e.options[e.selectedIndex].text to get the text and place it in the input, but is there a way I could add attributes to each option so its like <option value="option1" minLvl="1" maxLvl="10">Option1</option> and then pull the data from minLvl and maxLvl and then populate the values into the inputs?
function updateinput(){
var e = document.getElementById("event");
var catSelected = this.value;
document.getElementById("minLvl").value=catSelected;
}
<select name="Event" id="event" onChange="updateinput(this);">
I was able to get it to work with this code:
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("event");
var minLvl = e.options[e.selectedIndex].getAttribute("minLvl");
var maxLvl = e.options[e.selectedIndex].getAttribute("maxLvl");
document.getElementById("minLvl").value=minLvl;
document.getElementById("maxLvl").value=maxLvl;
}
</script>
<option value="option" minLvl="1" maxLvl="3">option</option>