How to set html properties of a newly added cell through javascript - javascript

<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>

Related

Creating a timetable using JavaScript

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>

Dynamic generated html controls cannot send exact row value

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>

How can I add a row upon clicking a button for my table?

I have a button at the bottom of my table. I have been messing around with java script, but Im confused on how I would add the correct amount of cells in each row upon clicking my button.
Also, is there a way to add a row, while it also adding a new set of buttons at the end of each row?
Here you have the information, this is what you need. http://www.w3schools.com/jsref/met_table_insertrow.asp
Add Row
<script>
function myFunction() {
var table = document.getElementById("data-table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(-1);
var cell4 = row.insertCell(-1);
var cell5 = row.insertCell(-1);
var cell6 = row.insertCell(-1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
cell4.innerHTML = "NEW CELL4";
cell5.innerHTML = "NEW CELL5";
cell6.innerHTML = "NEW CELL6";
}
</script>
You can use the insertRow() method, this creates an empty <tr> element and adds it to a table.
The insertRow() method inserts the new row(s) at the specified index in the table.
Note: A <tr> element must contain one or more <th> or <td> elements.
function myFunction() {
var table = document.getElementById("data-table");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<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>
<button onclick="myFunction()">Try it</button>
</body>
</html>
I see you are using jQuery if you go in that way you could use something like:
$('#addRow').click(function(e){
e.preventDefault();
var $tr = $('<tr>').html("<td>cdcs</td><td>csc</td><td>cscs</td><td>cscs</td><td>cscs</td>");
var $tdButtons = $('<td>').html('<button>Compress</button>CompressDownloadDelete');
$tr.append($tdButtons);
$('#data-table').append($tr);
});
and the link add row must be something like
Add Row

Inserting value in input box using innerHTML and GetElementById

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>

Dynamically insert table values based upon input?

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";
}

Categories

Resources