I am creating a html table using javascript as follows:
var table = document.getElementById("ordertable");
var rowcount = document.getElementById("ordertable").rows.length;
var row = table.insertRow(rowcount);
row.id="row_"+rowcount;
row.className = "rec_unselected";
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4)
I want to add a onmousedown function in in insertion step so I added like follows:
row.innerHTML = "onmousedown='RowClick(this,false);'";
But it is not working!
I am expecting the table like:
`<tr onmousedown="RowClick(this,false);" id="row_1" class="rec_unselected"`>
<td>any value</td>
<td>any value</td>
<td>any value</td>.....................
But I am getting as <tr id="row_1" class="rec_unselected">
Simply add your event listener with JavaScript by doing:
row.onmousedown = function(){ RowClick(this,false); }
What row.innerHTML = "onmousedown='RowClick(this,false);'" does is add that text into the element itself (and not as a onmousedown attribute event).
What you are trying to change is not the innerHTML. But since you are doing this in JS already, you should not move the function call to your HTML, but have it all in your scripts.
You add the click event to your row in JS like this:
row.addEventListener('mousedown', function (event) {
RowClick(event.target, false);
});
Related
Please help me to solve two issues:
1. Make space between each additional textbox that is created from javascript
2. Align (from left at some position)the textboxes that are created from javascript with another textbox created from jsp
so basically, there is a textbox from JSP on the JSP page, when user clicks on Add button, the Javascript code adds additional textbox each time. I want the existing box from jsp and the addtional textboxes from javascript align at certain position from left and space between each textbox from javascript.
Thanks in advance
The Javascript and jsp code are below:
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.name = "choiceEntry";
element2.type = "text";
element2.size = "100";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<html>
<form method="post" action="poll_save.jsp">
<TABLE id="dataTable" width="350px" border="0">
<TR>
<!-- <TD> 1 </TD>-->
<TD><INPUT type="text" class="bigText" value="
<%=choice.getChoiceEntry()%>" size = "100" name="choiceEntry"/> </TD>
<TD> <INPUT type="checkbox" name="chk"/></TD>
</TR>
</TABLE>
I'm not sure of what you want, but if you only want a vertical spacing and a left margin between inputs you'll be fine with this:
form[action="poll_save.jsp"] table input {
/* Your left offset here */
margin-left: 125px;
margin-top: 32px;
}
And for the code, add new inputs can be done in many ways, one might be:
const addOne = document.querySelector('#add-one');
const table = document.querySelector('#dataTable tbody');
let i = 0;
addOne.addEventListener('click', () => {
table.innerHTML += `
<tr>
<td>
<input name="input-${i++}" type="text" />
</td>
</tr>
`;
});
Perhaps you might want something more flexible? I mean like making them align to the center of their container? If that's the case, please provide a sketch of what you want to make it clearer.
Also my personal recommendation is that you move your style needs to css, do not leave them in the tags (Things such as <table width="..." ...>) and to not use IDs, or only IDs, I recommend you to add classes, specially for styling.
Here you have a working example: https://jsfiddle.net/sigmasoldier/kw8x3b42/2/
Note that there the JSP input is not written in JSP, but you can image that it has the JSP syntax.
This question already has answers here:
Adding an onclick event to a table row
(12 answers)
Closed 4 years ago.
I am adding rows to an existing table using JavaScript insertRow method
For one cell, I want to add an onclick event.
How can I do that using pure JavaScript?
I am attaching my code.
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
</table>
<br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell1.onclick()="xfunc()";
}
function xfunc(){
alert("Hi")
}
</script>
</body>
</html>
onclick is a html property, you have assign a function to this property to handler click event.
In you case:
cell1.onclick = xfunc; // instead of cell1.onclick()="xfunc()";
Update your function as below
<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell1.onclick=xfunc;
}
function xfunc(){
alert("Hi")
}
</script>
Use the below one.
cell1.addEventListener('click', xfunc);
First you could try something really simple:
cell1.setAttribute('onclick', 'xfunc()');
Maybe this already Handles your problem.
If not you just could use a DIV inside the cell:
var div = document.createElement('div');
div.setAttribute('onclick', 'xfunc()');
div.setAttribute('style', 'height: 100%; width: 100%');
div.innerHTML = 'NEW CELL1';
cell1.appendChild(div);
This should handle the problem for sure.
The only thing im not really sure about is wether a table-cell is capable of onclick attributes :)
LG
I think the problem is that, How you are attaching the event to cell1? Try the following code:
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell1.onclick = xfunc; //<-- problem was on this line
}
I am creating a program that connects to Firebase Realtime Database and displays the value in a table.
Her is my code:
var leadsRef = database.ref('leads/'+leadID);
var table = document.getElementById('remarksTable');
leadsRef.on('child_added', function(snapshot) {
var remark = snapshot.val().remark;
var timestamp = snapshot.val().timestamp;
var row = document.createElement('tr');
var rowData1 = document.createElement('td');
var rowData2 = document.createElement('td');
var rowData3 = document.createElement('td');
var rowDataText1 = document.createTextNode(remark);
var rowDataText2 = document.createTextNode(timestamp);
var rowDataText3 = document.createTextNode("Some text");
rowData1.appendChild(rowDataText1);
rowData2.appendChild(rowDataText2);
rowData3.appendChild(rowDataText3);
row.appendChild(rowData1);
row.appendChild(rowData2);
row.appendChild(rowData3);
table.appendChild(row);
});
leadID is an ID which I get from the current url, it contains the correct value so no issues there, path is also absolutely right.
Here is the table code:
<table class="table table-bordered" id="remarksTable">
<tr>
<th><strong>Created On</strong></th>
<th><strong>Timestamp 2</strong></th>
<th><strong>Remarks</strong></th>
</tr>
<tr>
<td>12312313231</td>
<td>12312312312</td>
<td>just a remark.</td>
</tr>
</table>
Now, when I run the page, it connects to the Firebase database and loads the required values, creates table row and table data, attaches text to it and then finally attaches the row to table with the id of remarksTable but it is not creating rows properly. Please note the table is creating using Bootstrap.
This is how it looks:
As you can see, the first row displays fine but the next 2 rows which were created by javascript looks a bit different.
The most likely reason is that you are appending the new row to the table element and not the tbody element inside it, which is interacting poorly with the stylesheet that you didn't include in the question.
Note that all tables have a tbody element. The start and end tags for it are optional so it will be inserted by HTML parsing rules if you don't provide one (or more) explicitly).
#Quentin is right, or you can simply add new rows this way:
var table = document.getElementById("remarksTable");
var row = table.insertRow();
var rowData1 = row.insertCell(0);
var rowData2 = row.insertCell(1);
var rowData2 = row.insertCell(2);
rowData1.innerHTML = remark;
rowData2.innerHTML = timestamp;
rowData3.innerHTML = "some text";
Here is a working demo
function addCells() {
var table = document.getElementById("remarksTable");
var row = table.insertRow();
var rowData1 = row.insertCell(0);
var rowData2 = row.insertCell(1);
var rowData3 = row.insertCell(2);
rowData1.innerHTML = "your remark";
rowData2.innerHTML = "your timestamp timestamp";
rowData3.innerHTML = "some text";
}
<table id="remarksTable" border=1>
<tr>
<td>first cell</td>
<td>2nd cell</td>
<td>3rd cell</td>
</tr>
</table>
<button onclick="addCells()">Add New</button>
I am creating a table and adding and as follows:
var table = document.getElementById("resumes_table");
var rowcount = document.getElementById("resumes_table").rows.length;
var row = table.insertRow(rowcount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell2.id = "a"+rowcount;
cell2.name = "a"+rowcount;
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4)
I am adding id and name to my (cell) as follows:
cell2.id = "a"+rowcount;
cell2.name = "a"+rowcount;
Where id is working while cell2.name = "a"+rowcount; not working.
Table cells (<td>) do not have a name property.
You can check the full list of properties for the table cell element here
You can check that by doing:
console.log(cell2.hasOwnProperty('name'));
Or:
console.log(cell2.name);
Even though you are able to do cell2.name = "a"+rowcount; and probably if you check the cell2 variable after setting the name you will see the property set, when the browser renders the element, it won't take the name property into account because it's not part of the element's specs.
You can't set the "name" properties of a <td> element because <td> don't have that kind of properties. Just check on w3cschools website.
Just a hint. Actually can't add a comment so I have to insert an answer. When you insert a question, you have to use "Code Sample" to insert code as <td> or when the question is published <td> will become invisible.
i Want to add loop to read all html table rows data which are "Input text" and want to show all the "Input text" data according to row as alert by click once on submit this code is only working for one table row data which
is generated
function myFunction() {
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);
var textf1 = '<input type="text" value="Fname1" id="text1" />';
var textf2 = '<input type="text" value="Fname2" id="text2" /> ';
cell1.innerHTML = textf1;
cell2.innerHTML = textf2;
cell3.innerHTML = textf4;
}
function first(){
}
alert("Hello"+text1.value+"Your Surname Is "+text2.value+" You Have Chosen");
return myFunction()
}
<
<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"></table>
<table id="myTable1"></table>
<br>
<div id="first"></div>
<button onclick="myFunction()">Add Your First row</button>
<button onclick="Submit()">Submit</button>
No so much a solution, but this might get you going.
To create a new row...
HTML
<input type="button" id="mybutton">Add Row</button>
jQuery
$('#mybutton').click(function(){
$('#mytable tr:last').after('<tr><td>...</td></tr>');
});
To "loop" through your table...
jQuery
// Each row in your table.
$('#mytable> tbody > tr').each(function (key, row) {
var $row = $(row);
var $input = $row.find(':input');
// Each input for the given row.
$.each($input, function (key, element) {
var $element = $(element);
console.log($element);
});
});