The following code works on the latest version of Firefox, Chrome, Safari and IE but not on Opera. When I click on the add button using Opera, a very thin space seems to have been added to row, but nothing else... Can anyone help?
The Form:
<form method="post" action="send.php">
<table id="table">
<tr><th>job</th><th>comment</th></tr>
<tr>
<td><textarea name = "job[]"></textarea></td>
<td><textarea name = "comment[]"></textarea></td>
<tr>
</table>
<input type ="button" value="add entry" onclick="add('table')"/>
<input type ="submit" id="submit" value="submit"/>
The JavaScript:
var names = ['job[]', 'comment[]'];
function add(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
var newentry = document.createElement('textarea');
newentry.type = "text";
newcell.appendChild(newentry);
}
}
Setting newentry.type gives
Uncaught exception: DOMException: NO_MODIFICATION_ALLOWED_ERR
Actually, there is not type attribute of textarea, http://www.w3schools.com/tags/tag_textarea.asp. You would need the type if you would use input.
If you remove the line setting the type, it works good.
I also spotted another error in your code: you don't close the second row, but open a new one.
This is the good code:
<tr>
<td><textarea name = "job[]"></textarea></td>
<td><textarea name = "comment[]"></textarea></td>
</tr>
This line: newentry.type = "text"; causes an exception in Opera: Uncaught exception: DOMException: NO_MODIFICATION_ALLOWED_ERR. The line does nothing anyway (at least in Chrome), so I guess you can remove it.
var newentry = document.createElement('textarea');
newentry.type = "text";
console.log(newentry.type);
-> textarea
Use native DOM methods like .createElement to create TR(row) and TD(cells) which are supported across all browsers.
Your code might look as following:
var names = ['job[]', 'comment[]'];
function add(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.getElementsByTagName("TR").length;
var row = document.createElement("TR")
var colCount = table.getElementsByTagName("TR")[0].childNodes.length;
for (var i=0; i<colCount; i++) {
var newcell = document.createElement("TD");
row.appendChild(newcell);
var newentry = document.createElement('textarea');
newentry.type = "text";
newcell.appendChild(newentry);
}
}
table.appendChild( row );
}
I didn't test the above code, but it will help you to get there.
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.
I have a form like that:
<form>
<table id="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>SVNr</th>
</tr>
<tr>
<td contenteditable="true">Jill</td>
<td contenteditable="true">Smith</td>
<td class="svnr" contenteditable="true">50</td>
<td><input type="submit" value="Remove" onclick="DeleteRow(this)"></td>
</tr>
<tr>
<td contenteditable="true">Eve</td>
<td contenteditable="true">Jackson</td>
<td class="svnr" contenteditable="true">94</td>
<td><input type="submit" value="Remove" onclick="DeleteRow(this)"></td>
</tr>
</table>
<input type="button" value="Save Changes">
</form>
This one works perfectly. Futhermore, I want to add table rows to my table programmatically.
I do it this way:
count = numberOfRows;
formular[count] = new Object();
formular[count]["Firstname"] = document.getElementById("Firstname").value;
formular[count]["Lastname"] = document.getElementById("Lastname").value;
formular[count]["SVNr"] = document.getElementById("SVNr").value;
var table = document.getElementById("table");
var TR = table.insertRow(count);
var TD = document.createElement("td");
TD.setAttribute("contenteditable", "true");
var TD2 = document.createElement("td");
TD2.setAttribute("contenteditable", "true");
var TD3 = document.createElement("td");
TD3.setAttribute("contenteditable", "true");
TD3.className = "svnr";
var TD4 = document.createElement("td");
var TXT = document.createTextNode(formular[count]["Firstname"]);
var TXT2 = document.createTextNode(formular[count]["Lastname"]);
var TXT3 = document.createTextNode(formular[count]["SVNr"]);
var Input = document.createElement("input");
Input.type = "submit";
Input.value = "Remove";
Input.onclick = "DeleteRow(this);";
TD.appendChild(TXT);
TR.appendChild(TD);
TD2.appendChild(TXT2);
TR.appendChild(TD2);
TD3.appendChild(TXT3);
TR.appendChild(TD3);
TD4.appendChild(Input);
TR.appendChild(TD4);
document.getElementById("Firstname").value = "";
document.getElementById("Lastname").value = "";
document.getElementById("SVNr").value = "";
Also this code is working well. The only problem is that the Remove function doesn't work correctly for the table rows I added programmatically.
My Removing function looks like that:
function DeleteRow(o) {
var p = o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
This function removes ALL programmatically added values if I press the button for one of them. This function works for the 2 entries in the form I didn't add programmatically but as I said, if I press the Remove button for one of added entries, it removes all programmatically added rows and not just the chosen one.
You need to add in something to uniquely identify each tr. You could set a custom attribute on each tr, set a unique id, etc. and pass the unique value to the delete function.
In addition you may find it easier to work with tables by using the DOMTable properties & methods:
http://www.javascriptkit.com/domref/tableproperties.shtml
http://www.javascriptkit.com/domref/tablemethods.shtml
i use this function to create a new row in table
function addRow(obj)
{
var table = document.getElementById("table2");
var rowCount = table.rows.length-1;
var row = table.insertRow(rowCount);
var nowrownum = table.rows.length-1;
var colCount = table.rows[2].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[2].cells[i].innerHTML;
newcell.style.cssText = table.rows[2].cells[i].style.cssText;
//Here is problem
newcell.childNodes[0].setAttribute("name",table.rows[2].cells[i].childNodes[0].getAttribute("name")+nowrownum);
//End here
newcell.childNodes[0].id = table.rows[2].cells[i].childNodes[0].id+nowrownum;
switch(newcell.childNodes[0].type)
{
case "text":
newcell.childNodes[0].value = "";
break;
}
}
obj.style.visibility = "hidden"; //to hide current button
}
Here is my html code
<form name=form id=form method=POST target="frametemp">
<table name ="table2" id="table2" border="1" align="Center">
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
</tr>
<tr>
<td>xxxxx</td>
<td><input type="text" id="edit_0" name="edit_0" ></td>
<td>yyyy</td>
<td><input id="add_bt_0" onclick="JavaScript : addRow(this);" name="add_bt_0" value="addrow" type="button" ></td>
</tr>
after row is add i check the page from ie developer tool
<td><input type="text" id="edit_1" name="edit_0" submitName="edit_1" ></td>
<td><input id="add_bt_1" onclick="JavaScript : addRow(this);" name="add_bt_0" submitName="add_bt_1" value="addrow" type="button" ></td>
the name attribute does not change but it create submitName.
how can i make name attribute change.
my target brower is IE 7++(now i use ie 9)
How you change the id ..?? Use the same code to change the attribute name .. I mean
newcell.childNodes[0].name = table.rows[2].cells[i].childNodes[0].name + nowrownum;
They fixed this in IE8. In previous versions, you need to include the name when you call createElement. From MSDN:
Internet Explorer 8 and later can set the NAME attribute at run time
on elements dynamically created with the IHTMLDocument2::createElement
method. To create an element with a NAME attribute in earlier versions
of Internet Explorer, include the attribute and its value when using
the IHTMLDocument2::createElement method.
Here is the example from MSDN:
var newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST'VALUE='First Choice'>")
I have a Javascript like this:
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
}
}
}
var showMode = 'table-cell';
if (document.all) showMode='block';
function toggleVis(btn){
btn = document.forms['tcol'].elements[btn];
cells = document.getElementsByName('t'+btn.name);
mode = btn.checked ? showMode : 'none';
for(j = 0; j < cells.length; j++) cells[j].style.display = mode;
}
</script>
The following is HTML for show/hide the columns and insert new row:
<body>
<form name="tcol" onsubmit="return false">
Show columns
<input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> 1
<input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> 2
<input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> 3
</form>
<input type="button" value="Insert Row" onclick="addRow('dataTable')">
<table id="dataTable">
<tr>
<td name="tcol1" id="tcol1"><input type="text" name="txt1"></td>
<td name="tcol2" id="tcol2"><input type="text" name="txt2"></td>
<td name="tcol3" id="tcol3"><input type="text" name="txt3"></td>
</tr>
</table>
I can insert row, but only the first row's column can be hidden. Is it because of the input fields' attributes? If yes, how do I add tag attribute into new row? Please help me out on this. Thanks.
newcell.innerHTML = table.rows[0].cells[i].innerHTML wont copy attribute to new cell, it will just copy innerHtml of table.rows[0].cells[i] cell.
So name attribute wont get applied to newcelll toggleVis functions work by finding cells by name attribute.
You can add following code in addRow to apply name attribute to newcell.
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
newcell.setAttribute("name",table.rows[0].cells[i].getAttribute("name"));//use setAttribute to set any attribute of dom element
newcell.style.display = table.rows[0].cells[i].style.display ; // to copy display style
newcell.id = table.rows[0].cells[i].getAttribute("name"); // IE workaround for getting this table cell in getElementsByName , see this http://stackoverflow.com/questions/278719/getelementsbyname-in-ie7
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
}
}
}
I know this doesn't answer your specific question, but your code needs a lot of help. The way you are doing things is very prone to breakage and can be accomplished in a much simpler way. Here is one example. I used jQuery to save myself time, but the principles can be mapped to plain javascript if you don't want to use jQuery.
Don't use inline javascript calls. You can monitor the parent container of the checkbox and determine which one was changed.
Don't monitor onclick events for checkboxes. Use onchange instead. This is safer.
You can use the html5 data attribute to store which checkbox was clicked. For example, <input type=checkbox name="col1" checked data-number="1"> 1.
Use the clicked data field to determine which cell in the table you want to modify.
http://jsfiddle.net/E3D2U/
$('input:checkbox').change( function() {
//which checkbox was changed?
var number = $(this).data('number') - 1;
//get the table cell that matches the clicked number
var targetTD = $('#dataTable td')[number];
//if our checkbox is checked then...
if ($(this).is(':checked')) {
$(targetTD).css('background-color', 'white');
}
else {
$(targetTD).css('background-color', 'yellow');
}
});
I'm writing a simple web page that displays a table. It the right column of the table I want to add a button in every row that says 'View'. I wrote a function that does this in ie by creating a button object and setting value = 'view' but in firefox and chrome the button displays with no text. Does anyone know why? Here is my code:
function addRow(id, sender, message){
var theTable = document.getElementById('messageTable');
var lastRow = theTable.rows.length;
var newRow = theTable.insertRow(lastRow);
newRow.id = id;
var cellLeft = newRow.insertCell(0);
var textNode = document.createTextNode(id);
cellLeft.appendChild(textNode);
var secondCell = newRow.insertCell(1);
var textNode2 = document.createTextNode(sender);
secondCell.appendChild(textNode2);
var messageCell = newRow.insertCell(2);
var messageNode = document.createTextNode(message);
messageCell.appendChild(messageNode);
var viewCell = newRow.insertCell(3);
var viewNode = document.createElement('button');
viewNode.value = 'View';
viewNode.onclick = function(){
alert('clicked: ' + id);
};
viewCell.appendChild(viewNode);
}
You have to do viewNode.innerHTML = 'View' since in FF button displays whatever is wrapped by the tag but not the value attribute
<button>s aren't self-closing like <input>s, and don't have a value attribute. You already have the solution in other parts of your code:
viewNode.appendChild(document.createTextNode('View'));
You also don't need to create variables for nodes that you're only using once. You can consolidate your code in a few places by using the above style.