Based upon user-input I want to generate a matrix / table for display. Here is the html
html
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>lostBondUserPmtEntry</title>
<body>
<form name="test" ><font face="Verdana" size = "2">
<input name="Text1" type="text" /> score <br>
<input type="submit" Name ="test" id="gp"/>
<input type="hidden" name="dateFactor">
<table border="1">
<tr>
<td>sensitivity level</td>
<td>criticality level</td>
<td>priority level</td>
<td>Response time</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>high</td>
<td>2 hours</td>
</tr>
</table>
</form>
</body>
DEMO
The brief algo is
if score is 10 (certain value) populate the table as with predefined values (those values with column names are shown in DEMO). I want the table to be generated on particular button. I can call function, but I want to know how to append the html code for table on function call.
Thanks.
To append a row to the table you can try something like this:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = "cell 1 text";
var cell2 = row.insertCell(1);
cell2.innerHTML = "cell 2 text";
var cell3 = row.insertCell(2);
cell3.innerHTML = "cell 3 text";
}
Related
I am trying to create a web page where user can create his own schedule. User can enter the values of lines and columns in some input to build a table in which the user will write his schedule. I use this javascript code:
var p = document.getElementById('paragraph');
var table = document.createElement('table');
var tbody = document.createElement('tbody');
table.appendChild(tbody);
for (let i = 0; i < lines; i++){
let tr = document.createElement('tr');
for (let j = 0; j < columns; j++){
let td = document.createElement('td');
}
tbody.appendChild(tr);
}
p.appendChild(table);
However, when I'am trying to add information to table cells, I can't write values to each of them. I've used .innerHTML but it doesn't work the way it needs to. The information will be written only to the beginning of the table.
Should I give id to each td and then address to them by id when I need to write the information? Or there is another way to write values to table cells?
I think you need something like this to insert the data.
We have insertRow(), which is pre-defined function which i used in this answer to insert new row and then inserted columns in it with insertCell function.
<!DOCTYPE html>
<html>
<body>
<div class="inputs">
<input type="text" id="input1" placeholder="Enter first col data" >
<input type="text" id="input2" placeholder="Enter second col data" >
</div>
<br> <br> <br>
<table id="myTable">
<thead style="background-color: beige;">
<tr>
<td>default head row cell 1</td>
<td>default head row cell 2</td>
</tr>
</thead>
<tbody></tbody>
</table>
<br>
<button type="button" onclick="myFunction()">add data to body row</button>
<script>
function myFunction() {
var table = document.querySelector("#myTable tbody");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
const val1 = document.getElementById('input1').value;
const val2 = document.getElementById('input2').value;
cell1.innerHTML = val1;
cell2.innerHTML = val2;
}
</script>
</body>
</html>
I think that you need to refer to your button in the js file and write a function that will be executed on the "onclick" event
In this function, you are accessing the table variable. By using the built in javaScript function «insertRow()» you are adding rows to your table. Then you should add cells to this row in which information that users entered will be stored. This you can also do by using build in function «insertCell()»
Next, you access the fields in which the user has entered data
Retrieve values using the «value» built-in function
Using the built-in «innerHTML» function, draw cells with the information that you received in the previous step
You can look at the written code below for better assimilation of information
<!DOCTYPE html>
<html>
<body>
<div class="inputs" >
<input type="text" id="firstColumn" placeholder="Enter data here" >
<input type="text" id="SecondColumn" placeholder="Enter data here" >
</div>
<table id="Table">
<thead>
<tr>
<td style="background-color: pink;">Name of first column</td>
<hr>
<td style="background-color: purple;">Name of second column</td>
</tr>
</thead>
<tbody></tbody>
</table>
<br>
<button style="background-color: yellow;" type="button" id = "btn">Add</button>
<script>
const button = document.querySelector('#btn');
btn.onclick = function() {
var table = document.querySelector("#Table tbody");
var row = table.insertRow();
var Fcell = row.insertCell(0);
var Scell = row.insertCell(1);
const Fdata = document.getElementById('firstColumn').value;
const Sdata = document.getElementById('SecondColumn').value;
Fcell.innerHTML = Fdata;
Scell.innerHTML = Sdata;
}
</script>
</body>
</html>
<script>
function myFunction() {
var table = document.getElementById("traTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell2.innerHTML = "<td><input type="/text/"size="/30/"/></td>";
</script>
I have the following code and what I am trying to do is, when the user clicks on the button which fires this script. I want to add a new cell to the table. However, i need the cell which is added to be an input text box type. Is innerHTML is the right thing to use here?
You do not need to specify the <td> tag in cell2.innerHTML, simply do:
cell2.innerHTML = "<input type='text' size='30'/>"
function myFunction() {
var table = document.getElementById("traTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell2.innerHTML = "<input type='text' size='30'/>";
}
<table id="traTable" border='1'>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
</table><br>
<button onclick="myFunction()">Try it</button>
What you're doing there is adding a td (containing a textbox) to a td.
So the result of your code (assuming an otherwise empty table) will be:
<table id="traTable">
<tr>
<td></td>
<td>
<td>
<input type="text" size="30"/>
</td>
</td>
</tr>
</table>
which is clearly invalid due to the nested <td>s.
There is nothing ostensibly wrong with using innerHTML, but you have to set the value correctly. innerHTML overwrites what's inside the element, not the element itself.
cell2.innerHTML = '<input type="text" size="30"/>';
will get you the result you want (N.B. I also simplified your code to be more readable).
Demo:
function myFunction() {
var table = document.getElementById("traTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell2.innerHTML = '<input type="text" size="30"/></td>';
}
myFunction();
console.log(document.getElementById("traTable").outerHTML);
table td { border: 1px solid blue; padding:5px; }
<table id="traTable">
</table>
I want to use a javascript in my jsp page in order to insert value of the input box into a table row.
My Jsp Page:-
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script type="text/javascript">
function addData(){
var x = 1;
var a = document.getElementById('area').value;
var table = document.getElementByTagName('table')[0];
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = x++;
cell2.innerHTML = a;
}
</script>
</head>
<body>
<h2>Area...</h2>
Area: <input type="text" id="area" name="area" required/><label>sq. ft.
<button onclick="addData();">Add To Table</button>
</br></br>
<div>
<h2>Area Table...</h2>
<table border="1">
<tr>
<th>Section</th>
<th>Area</th>
</tr>
<tr>
<td>1</td>
<td>125.4485</td>
</tr>
</table>
</div>
</body>
</html>
Here i wanted to insert a row into a table from the input box. But the value is not being inserted.
Is there any problem in the code.
use the console developer tools of your browser, to see errors,
here is the error :
Uncaught TypeError: document.getElementByTagName is not a function
at addData (a.html:11)
at HTMLButtonElement.onclick (a.html:28)
which means javascript doesn't recognise this function , so you have to look , the right notation of the function which is
getElementsByTagName
Please correct the spelling getElementByTagName to getElementsByTagName
Typo
Try like this, TagName is the multiple selector.you are missing s
var table = document.getElementsByTagName('table')[0];
instead of
var table = document.getElementByTagName('table')[0];
function addData() {
var x = 1;
var a = document.getElementById('area').value;
var table = document.getElementsByTagName('table')[0];
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = x++;
cell2.innerHTML = a;
}
<h2>Area...</h2>
Area: <input type="text" id="area" name="area" required/><label>sq. ft.
<button onclick="addData();">Add To Table</button>
</br></br>
<div>
<h2>Area Table...</h2>
<table border="1">
<tr>
<th>Section</th>
<th>Area</th>
</tr>
<tr>
<td>1</td>
<td>125.4485</td>
</tr>
</table>
</div>
I'm trying to find a way to insert a row in a table based on a value that the user inputs and if that value exists in the table. For example, the table will have 10 rows. The user would like to add a row beneath row number 8. Please see screenshot.
<form>
<table class="myTable" id="myTable">
<tr>
<th class="myTable th">PALLET #</th>
<th class="myTable th">CASE COUNT</th>
<th class="myTable th">HILLTOP LOT #</th>
<th class="myTable th">SSCC (LAST 4)</th>
</tr>
<?php
for ($x=1 ; $x <=2 4; $x++) {
echo
'<tr>
<td style="font-size: 160%" id="pallet">' .$x. '</td>
<td id="caseCount"><input type="text" id="inputText_Small" name="caseCount" value="" maxlength="2"/></td>
<td id="hilltopLot"><input type="text" id="inputText_Order" name="hilltopLot" value="" maxlength="10"/></td>
<td id="sscc"><input type="text" id="inputText_Medd" name="sscc" value="" maxlength="4"/></td>
</tr>';
}
?>
</table>
After clicking on the "Add Line" button and typing 8, it will look for row number 8 and insert a row beneath it also naming it row 8.
<br />
<br />
<p class="center">
<input type="submit" value="Submit" name="submit" class="blueButt_Big" />  
<input class="blueButt_Big" type="button" value="Cancel" onclick="parent.location='view_prodLine.php'" />  
<input class="blueButt_Big" type="button" value="Add Line" onclick="addLine()" />  
<input class="blueButt_Big" type="button" value="Delete Line" onclick="myDeleteFunction()" />
</form>
<script>
function addLine() {
var person = prompt("Please enter the pallet number");
if (person != null) {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = person;
cell2.innerHTML = '<input type="text" id="inputText_Small" name="caseCount" value="" maxlength="2"/>';
cell3.innerHTML = '<input type="text" id="inputText_Order" name="hilltopLot" value="" maxlength="10"/>';
cell4.innerHTML = '<input type="text" id="inputText_Medd" name="sscc" value="" maxlength="4"/>';
I've only been able to add a row to the very bottom of the table after prompting the user for input. I know I can specify where the row is inserted using the code I commented out. The obvious problem is that the position where it will insert the new row will change if the user adds more than one line. I fear I may be overthinking it, any thoughts?
//var x = document.getElementById("myTable").rows[22].cells;
//x[0].innerHTML = person;
}
}
function myDeleteFunction() {
document.getElementById("myTable").deleteRow(-1);
}
</script>
You can do it this way:
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<input type="number" id="RowNumber"/>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var RowNumber = document.getElementById("RowNumber").value;
var table = document.getElementById("myTable");
var row = table.insertRow(RowNumber);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
</script>
See it working here:
https://jsfiddle.net/p01r7sjb/1/
I have added a row using javascript. Now I want the new columns's value to be picked from the input box text by id. There's some sort of error in it, which I'm unable to get.
<html>
<head>
<script>
function addtosubtotal() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = getElementById("cid");
cell2.innerHTML = document.getElementById("name");
}
</script>
</head>
<body>
<table id="myTable" >
<tr>
<td>S. No</td>
<td>Item Name</td>
<td>Subtotal</td>
</tr>
<tr>
<td><input type="text" id="cid" name="id" /> </td>
<td><button onclick="addtosubtotal()" /></td>
</tr>
</table>
</body>
</html>
You don't have an id for the input name:
<input type="text" id="name" name="name" />
So you wont get it by id
You can also combine the two statements in your JavaScript if you want to
<script>
function addtosubtotal() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0).innerHTML = document.getElementById("cid").value;
var cell2 = row.insertCell(1).innerHTML = document.getElementById("name").value;
}
</script>