I have a problem in getting the exact row value from the dyanamically generated html table with controls. Based on this value I will be calling a function in which I will updated the user input to DB. I need to get the row value in drop down change event
<table id='TFtable'>
<tr> <td align='left'> <input type="button" value="Add More Task" onClick="addRow('TFtable')" name="Add Task"></td> </tr>
</table>
<script>
var rowcount;
function addRow(tableID)
{
rowcount =document.getElementById(tableID).rows.length;
rowcount=rowcount-2;
rowcount=rowcount+1;
var table = document.getElementById(tableID);
var row = table.insertRow(-1);
label = row.insertCell(0);
var element6 = document.createElement("Label");
element6.id="sno"+rowcount;
element6.name="sno"+rowcount;
label.innerHTML=rowcount;
label.appendChild(element6);
var cel1l = row.insertCell(1);
var element1 = document.createElement("select");
element1.id="Category"+rowcount;
element1.name="Category"+rowcount;
element1.onchange =function(){getrowcount(rowcount);};
element1.className="selectBox";
var option1 = document.createElement("option");
option1.value ="Automation-Work";
option1.text ="Automation-Work";
element1.appendChild(option1);
var option1a = document.createElement("option");
option1a.value ="Document-Work";
option1a.text ="Document-Work";
element1.appendChild(option1a);
cel1l.appendChild(element1);
}
function getrowcount(rowvalue)
{
alert (rowvalue);
}
</script>
The following code will log the current rowIndex. for that we will find the parent tr element using parentNode property, inside select's change function.
var selectArr = document.querySelectorAll('select')
selectArr.forEach(function(item){
item.addEventListener("change",function(e){
console.log(e.target.parentNode.parentNode.rowIndex)
},false);
})
table, td {
border:1px solid black;
}
<table>
<tr>
<td><select>
<option>123</option>
<option>45</option>
</select>
</td>
</tr>
<tr>
<td><select>
<option>123</option>
<option>45</option>
</select>
</td>
</tr>
<tr>
<td><select>
<option>123</option>
<option>45</option>
</select>
</td>
</tr>
</table>
Related
<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 have been trying to add both a row and a column to a table, which I think I have finally managed. Now I am trying to create a button using javascript beneath the table that will calculate the sum of each row in the new column and will calculate the the last two columns in the new row. I have tried various ways of creating the button but I can't seem to make it work, and as you can see I don't know how to create the code that will make the calculations that I need.
Here is my code:
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
function addRow()
{
if (!document.getElementById) return false;
var table = document.getElementById("pricetable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.setAttribute("id","sumrow");
var cell1 = row.insertCell();
var cell2 = row.insertCell();
var cell3 = row.insertCell();
var cell4 = row.insertCell();
var cell5 = row.insertCell();
}
function addColumn()
{
if (!document.getElementById) return false;
if (!document.createElement) return false;
var tHead = document.getElementById("pricetable").tHead;
for (var h=0; h<tHead.rows.length; h++)
{
var newTHead = document.createElement("th");
tHead.rows[h].appendChild(newTHead);
newTHead.innerHTML = "Sum";
}
var tBody = document.getElementById("pricetable").tBodies[0];
for (var i=0; i<tBody.rows.length; i++)
{
var newCell = tBody.rows[i].insertCell(-1);
}
}
function addButton()
{
var btn = document.createElement("input");
input.setAttribute("type", "button");
input.setAttribute("name","Calc price");
var foo = document.getElementById("pricetable");
foo.appendChild(btn);
btn.onclick = function()
{
alert ("Calulate price");
}
}
addLoadEvent(addRow);
addLoadEvent(addColumn);
addLoadEvent(addButton);
Here is the HTML code:
<body>
<div id ="container">
<div id ="header">
<h1>Electronics</h1>
</div>
<div id ="content">
<h3>Our prices</h3>
<table id ="pricetable">
<thead>
<tr>
<th>Article</th>
<th>Type</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>23456789</td>
<td>Phone</td>
<td>Apple</td>
<td>6500</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>22256289</td>
<td>Phone</td>
<td>Samsung</td>
<td>6200</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>24444343</td>
<td>Phone</td>
<td>MS Lumia</td>
<td>4200</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>19856639</td>
<td>Tablet</td>
<td>LG</td>
<td>4000</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>39856639</td>
<td>Tablet</td>
<td>Dell</td>
<td>2800</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>12349862</td>
<td>Tablet</td>
<td>Apple</td>
<td>3500</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
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>
I have a few tables like this
<table id="table_1">
<tr>
<td><input type="text" name="date[]"</td>
</tr>
</table>
the number of the <td>'s is very variable.
Currently I'm using a function like this:
function addRow(){
var table = document.getElementById('table_1');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0)
....
cell1.innerHTML="<input type='text' name='date[]' />
}
using this method, it would require a custom function for every type of table.
Is there a way, to add a Line to a table, which is exactly the same as the last row?
In a table with 7 cells, 7 cells would be added, with the right content.
Is this possible in pure JS?
You could do it this way with jQuery:
Edit:
Sorry, I did not see you wanted pure JS.
jQuery
$('button').click(function(){
var table = $(this).prev('table');
var lastrow = $('tr:last-child', table).html();
table.append('<tr>' + lastrow + '</tr>');
});
HTML
<table>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
<button>Add a row</button>
<table>
<tr>
<th>Meal</th>
<th>Price</th>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
<button>Add a row</button>
JS Fiddle Demo
Maybe this is what you need : http://jsfiddle.net/thecbuilder/bx326s31/1/
<input type="button" onclick="cloneRow()" value="Clone Row" />
<input type="button" onclick="createRow()" value="Create Row" />
<table>
<tbody id="tableToModify">
<tr id="rowToClone">
<td><input type="text" name="txt[]"/></td>
<td>bar</td>
</tr>
</tbody>
</table>
function cloneRow() {
var row = document.getElementById("rowToClone"); // find row to copy
var table = document.getElementById("tableToModify"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newID"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}
function createRow() {
var row = document.createElement('tr'); // create row node
var col = document.createElement('td'); // create column node
var col2 = document.createElement('td'); // create second column node
row.appendChild(col); // append first column to row
row.appendChild(col2); // append second column to row
col.innerHTML = "qwe"; // put data in first column
col2.innerHTML = "rty"; // put data in second column
var table = document.getElementById("tableToModify"); // find table to append to
table.appendChild(row); // append row to table
}
Refer : https://stackoverflow.com/a/1728578/3603806
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";
}