I'm using JavaScript to add drop down in the jsp by clicking a button but somehow its not working. Can someone please help me. I need to use html:select tag.
<script language="JavaScript" type="text/javascript">
function addRow() {
var mytbody = document.getElementById('mytbody');
var row = document.createElement('tr');
var cell1 = document.createElement('td');
cell1value='';
cell1value+='<html:select property="test1" styleId="test1"> <html:option value="code1">test 1</html:option> </html:select>';
cell1.innerHTML = cell1value;
row.appendChild(cell1);
mytbody.appendChild(row);
}
</script>
html codes:
<table id="mytable">
<tbody id="mytbody">
<tr>
<td>test1</td>
</tr>
</tbody>
</table>
<input type="button" onclick="addRow()" value="test"/>
</form>
</body>
</html>
Thanks for your help
I made a jsfiddle to check it out... I think you might just need to have this javascript in the head tag.
Use F12 developer tools and try to debug the issue when you click the button. You might find that addRow() is undefined.
I also changed the code a little bit due to the fact that I am not versed in JSP - sorry! Is that what the
"<html:select..."
string was? I changed it to straight up html.
http://jsfiddle.net/e7z1efgr/
function addRow() {
var mytbody = document.getElementById('mytbody');
var row = document.createElement('tr');
var cell1 = document.createElement('td');
var cell1value = '';
cell1value += '<select class="text1"><option value="code1">test 1</option></select>';
cell1.innerHTML = cell1value;
row.appendChild(cell1);
mytbody.appendChild(row);
}
<table id="mytable">
<tbody id="mytbody">
<tr>
<td>test1</td>
</tr>
</tbody>
</table>
<input type="button" onclick="addRow()" value="test" />
</form>
</body>
</html>
Your problem is the strange HTML you are inserting:
'<html:select property="test1" styleId="test1"> <html:option value="code1">test 1</html:option> </html:select>'
should be
'<select property="test1" styleId="test1"> <option value="code1">test 1</option> </select>'
What's the purpose? If you just need it to insert rows inside the table, it works fine already:
Look here:
http://codepen.io/anon/pen/NGNJrV
Can you elaborate the question please?
Related
I want to add table row dynamically. I tried with online solution but no luck
My code:
<script type="text/javascript">
var index = 2;
var chr = 68;
function insertRow(){
var table=document.getElementById("myTable");
var row=table.insertRow(table.rows.length);
var cell1=row.insertCell(0);
var t1=document.createElement("input");
t1.setAttribute('name', "sigID"+index);
t1.setAttribute('value', char(chr));
t1.setAttribute('size', 10);
cell1.appendChild(t1);
var cell2=row.insertCell(1);
var t2=document.createElement("input");
t2.setAttribute("type","text");
t2.setAttribute('name',"pattern"+index);
t2.setAttribute('size',10);
t2.setAttribute('colspan',2);
cell2.appendChild(t2);
index++;
chr++;
}
</script>
I have added one default row in HTML and then on clicking add I want to add row as per the need.
HTML Page:
<table id="myTable" style="margin-left:201px;">
<tr>
<th>SigID</th>
<th colspan="2">Patterns</th>
</tr>
<tr>
<td>
{!!Form::text('sigID1','A',array('size'=>'5'))!!}
</td>
<td colspan="2">
{!!Form::text('pattern1','',array('size'=>'102'))!!}
<input type="button" class="btn btn-primary btn-md" onclick="insertRow()" value="Add">
</td>
</tr>
</table>
Please let me know what is wrong in this code.
Change:
t1.setAttribute('value', char(chr));
to:
t1.setAttribute('value', String.fromCharCode(chr));
DEMO
You have error in this line:
t1.setAttribute('value', char(chr));
char is not Javascript function.
I assume you want this:
String.fromCharCode(chr)
Change the above line to this:
t1.setAttribute('value', String.fromCharCode(chr));
I always find this site usefull, you can take a look at the given example
http://www.w3schools.com/jsref/met_table_insertrow.asp
I am running into a very small issue which has taken more than two hours.
What I want is to insert a row in an HTML table and then sort it in ascending order. I've looked at this answer and thought that I can get this simple task working, but in vein.
Here is my little form and table:
Name: <input type="text" name="name" id="name"><br>
Status: <input type="text" name="status" id="status">><br>
<button onclick="myFunction(document.getElementsByName('name')[0].value,document.getElementsByName('status')[0].value)">Click</button><br><br>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Doe, John</td>
<td>Approved</td>
</tr>
<tr>
<td>aaa, John</td>
<td>Approved</td>
</tr>
</tbody>
</table>
My inline JavaScript function looks like this:
function myFunction(name, status) {
var table = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = name;
cell2.innerHTML = status;
// The following code should sort the table.
var tbody = $('#mytable').find('tbody');
tbody.find('tr').sort(function (a, b) {
return $('td:first', a).text().localeCompare($('td:first', b).text());
}).appendTo(tbody);
}
Please note that adding a row to the table works fine, it just adds it to the top.
There are no console errors. The code which (apparently) should sort the table does not do anything. I've the subset of my HTML here on Fiddle, and yes that works fine.
I know about jQuery tablesorter plugin but do not need to use it.
This selector:
$('#mytable')
...is incorrect. Your table's ID is myTable, and IDs are case-sensitive. Here's a working version of your code with that fix.
For some reason the following piece of code does not work to insert an extra table into my html document. The text is just randomly sitting at the top of the table instead of IN the table. Any ideas why it doesn't work?
<!DOCTYPE html>
<head>
<script type = "text/javascript">
function insertTable() {
var table = document.getElementById("houseListingTable").innerHTML;
table = table + "<tr><td>58,500</td><td>Montreal</td></tr>";
}
</script>
</head>
<body>
<table>
<tr>
<th>Price</th>
<th>Location</th>
</tr>
<div id = "houseListingTable">
</div>
</table>
<button onclick = "insertTable()">Insert Table<\button>
</body>
</html>
Why doesn't the table row add itself to my table when I click on the Insert Table button? Any help is appreciated!!
There are two problems here:
Having a <div> element directly inside a <table> is invalid HTML.
Your table variable here is just a string. Overwriting it has no effect on the DOM.
To fix it:
Remove the <div> and give the <table> an ID:
<table id="houseListingTable">
<tr>
<th>Price<\th>
<th>Location<\th>
</tr>
</table>
Use this JavaScript:
var table = document.getElementById("houseListingTable");
table.innerHTML += "<tr><td>58,500</td><td>Montreal</td></tr>";
Note how I am actually overwriting the table's .innerHTML property. This is an important distinction from what you have there.
Just a couple of comments before the answer. Please note that you are missing the html tag at the begging, and that you are using the incorrect bar "\" to close tags in table headers (it should be < /th>) and in the button tag (< /button>).
Also, the div inside the table is not correct.
The code does nothing because the function just gets the innerHTML. For your purpose, the function should get what's inside the table, add a row and then paste it back on the table
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">
function insertTable() {
var table = document.getElementById("houseListingTable").innerHTML;
table = table + "<tr><td>58,500</td><td>Montreal</td></tr>";
document.getElementById("houseListingTable").innerHTML = table;
}
</script>
</head>
<body>
<table id="houseListingTable">
<tr>
<th>Price</th>
<th>Location</th>
</tr>
</table>
<button onclick = "insertTable()">Insert Table</button>
</body>
</html>
Your HTML is broken. The ending tags are wrong.
<table id="houseListingTable">
<tr>
<th>Price</th>
<th>Location</th>
</tr>
</table>
You can use the insertRow of DOM method to add rows to table by getting the table first by Id
function insertTable() {
// Find a <table> element with id="houseListingTable":
var table = document.getElementById("houseListingTable");
// Create an empty <tr> element and add it to the table:
var row = table.insertRow(table.rows.length);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// Append a text node to the cell1
var price = document.createTextNode('58,500')
cell1.appendChild(price);
// Append a text node to the cell2
var location = document.createTextNode('Montreal')
cell2.appendChild(location);
}
I am trying to add a row to a table that is located in a form using javascript. The code works when is it is outside of the <form> tags, but once the code is surrounded by <form>, added rows will popup for a few milli seconds and then disappear.
The attached code was tested on Firefox and Mozilla with the same results. If I remove the <form> tags, the code works fine. Any ideal on why <form> tags is causing a reload and making the added rows to disappear?
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<script>
function addTableRow() {
var len = $('#vendorstbl tr').length
var table = document.getElementById("vendorstbl");
var row = table.insertRow(len);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
cell0.innerHTML = "<select id='test"+len+"'><option name='test"+len+"'>Apple</option><option name='test"+len+"''>Sony</option></select>";
cell1.innerHTML = "<input type='text' size='25' id='product"+len+"' name='product"+len+"'' value='Enter Data'>";
}
</script>
<html>
<body>
<h3>Adding Row To Table Test:</h3>
<form>
<table class='add' id='vendorstbl'>
<tr><th>Vendor</th><th>Product</th></tr>
</table>
<button onclick='addTableRow()'>Add Row</button>
</form>
</body>
</html>
Have you considered using an AngularJS directive to accomplish this?
A simple ng-Repeat with some formatting will accomplish this in only a few lines of code.
<table>
<tr ng-repeat="person in people" ng-class="rowClass(person)">
<td>{{ person.name }}</td>
</tr>
</table>
Example: http://jsfiddle.net/xEyJZ/
Source: https://docs.angularjs.org/api/ng/directive/ngRepeat
Note: this is meant to be a community wiki post
The following code using simple dom methods fails to add rows to the table. What's the issue?
<html>
<head>
<title>Javascript Test</title>
<script>
function addRow() {
var mytable = document.getElementById('mytable');
var row = document.createElement('tr');
var cell = document.createElement('td');
var text = document.createTextNode('This is a row');
cell.appendChild(text);
row.appendChild(cell);
mytable.appendChild(row);
}
</script>
</head>
<body>
<form action="#">
<table id="mytable">
<tr>
<td>This is a row</td>
</tr>
</table>
<input type="button" onclick="addRow()" value="Add A Row"/>
</form>
</body>
</html>
The issue at hand here is that the <table> element's correct structure is not present. When dealing with tables, the basic structure is:
<table>
<thead>
<tr>
<th>Heading for the table</th>
</tr>
</thead>
<tbody>
<tr>
<td>A row of data</td>
</tr>
</tbody>
</table>
The logic is that when dealing with tables, you want to keep the labels of the columns, and the actual data separate. Because most browsers fill in the <tbody> as part of the process of fixing broken HTML, few people realize this. When the browser sees you adding a <tr>, it doesn't know if you're trying to add it to the <thead> or the <tbody>, so it fails.
The following shows the correct method for adding the rows:
<html>
<head>
<title>Javascript Test</title>
<script>
function addRow() {
var mytbody = document.getElementById('mytbody');
var row = document.createElement('tr');
var cell = document.createElement('td');
var text = document.createTextNode('This is a row');
cell.appendChild(text);
row.appendChild(cell);
mytbody.appendChild(row);
}
</script>
</head>
<body>
<form action="#">
<table id="mytable">
<tbody id="mytbody">
<tr>
<td>This is a row</td>
</tr>
</tbody>
</table>
<input type="button" onclick="addRow()" value="Add A Row"/>
</form>
</body>
</html>
Any additional row needs to be added then take the first child of tableID and then use appendChild() method:
var tbl=document.getElementById("tbl");
var row=document.createElement("tr");
var cel=document.createElement("td");
cel.innerHTML='sometext';
row.appendChild(cel);
tbl.children[0].appendChild(row);