I'm using the following JavaScript function to add a row to my table. I want to write to the table the value of the current rowCount.
My function is:
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.childNodes[0].value = rowCount;
}
}
My HTML table:
<TABLE id="dataTable" border="0">
<TR style="display:none;">
<TD><INPUT type="checkbox" name="chk2"/></TD>
<TD><script>document.write(rowCount);</script><select name="room[][]" multiple="MULTIPLE" >
<option value="" selected ></option>
</select></TD>
</TR>
</TABLE>
I have tried <script>document.write(rowCount);</script> and <script>document.write(this.rowCount);</script>. The first returning the error: Can't find variable rowCount and the second: undefined is not an object.
It sounds a bit messy but the idea is that I want to pass the rowCount value into the name of <select name="room[][]> giving me:
<select name="room[0][]>
<select name="room[1][]>
<select name="room[2][]>
Related
I am having a hard time in inserting table rows dynamically since I haven't really tried it before. What I'm supposed to do is to insert a new table row with a select box with options from the an arraylist.
So far, this is my code:
HTML
<TABLE id="dataTable">
<TR>
<TD> 1</TD>
<TD>
<select name="option">
<%for(int i = 0; i < jList.size(); i ++){%>
<option value="<%=jList.get(i).getName%>"><%=jList.get(i).getName%></option>
<%}%>
</select>
</TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
JAVASCRIPT
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var count = rowCount + 1;
var row = table.insertRow(rowCount);
//*** EDIT ***
var cell1 = row.insertCell(0);
cell1.innerHTML = count;
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
//how do i put the options from the arraylist here?
cell2.appendChild(element2);
}
also, I would also like to know how to pass a variable from the javascript function to a java servlet because every time I pass the variable count in a hidden input type, the input does not contain the count. I hope you can help me with my dilemma.
Just after you create the "select" element You can simply loop through your"arraylist" and append the options :
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var count = rowCount + 1;
var row = table.insertRow(rowCount);
//*** EDIT ***
var cell1 = row.insertCell(0);
cell1.innerHTML = count;
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
//Append the options from the arraylist to the "select" element
for (var i = 0; i < arraylist.length; i++) {
var option = document.createElement("option");
option.value = arraylist[i];
option.text = arraylist[i];
element2.appendChild(option);
}
cell2.appendChild(element2);
}
Take a look at this fiddle : https://jsfiddle.net/bafforosso/66h3uwtd/2/
I am trying to make the code to add and remove desired rows on selecting id in the select box. My code is below :
HTML code :
<body>
<table id="table" border="1" style="float:left">
<tr>
<td>Employee id</td>
<td>Name</td>
<td>Designation</td>
</tr>
</table>
<select id="select_id" style="float:right">
<option>--select--</option>
<option value="1">1</option>
<option value="2">2</option>
</select><br/><br/>
<button onclick="delete_row()" style="float:right">remove</button>
<button onclick="include()" style="float:right">add</button>
</body>
My javascript code :
<script type="text/javascript">
var employees=new Array(2);
for(i=0;i<2;i++)
employees[i] = new Array(3);
employees[0][0] = 1;
employees[0][1] = "Rahul";
employees[0][2] = "Administer";
employees[1][0] = 2;
employees[1][1] = "Raj";
employees[1][2] = "Manager";
function include(){
var id = document.getElementById("select_id").value;
var table = document.getElementById("table");
var row = table.insertRow();
id=id-1;
var col1 = row.insertCell(0);
var col2 = row.insertCell(1);
var col3 = row.insertCell(2);
col1.innerHTML = employees[id][0];
col2.innerHTML = employees[id][1];
col3.innerHTML = employees[id][2];
}
</script>
Add button works fine. but for remove button I cant get a function to remove all the rows with selected id. Can anyone suggest me?
My code in jsfiddle : https://jsfiddle.net/noona/fNPvf/23235/
use querySelectorAll and rowIndex to achieve this. here is your updated code
var employees = new Array(2);
for (i = 0; i < 2; i++)
employees[i] = new Array(3);
employees[0][0] = 1;
employees[0][1] = "Rahul";
employees[0][2] = "Administer";
employees[1][0] = 2;
employees[1][1] = "Raj";
employees[1][2] = "Manager";
function include() {
var id = document.getElementById("select_id").value;
var table = document.getElementById("table");
var row = table.insertRow();
id = id - 1;
row.id = id;
var col1 = row.insertCell(0);
var col2 = row.insertCell(1);
var col3 = row.insertCell(2);
col1.innerHTML = employees[id][0];
col2.innerHTML = employees[id][1];
col3.innerHTML = employees[id][2];
}
function delete_row() {
var id = document.getElementById("select_id").value - 1;
var table = document.getElementById("table");
rowsCount = table.querySelectorAll('tr[id="' + id + '"');
for (var i = 0; i < rowsCount.length; i++) {
table.deleteRow(rowsCount[i].rowIndex);
}
}
<table id="table" border="1" style="float:left">
<tr>
<td>Employee id</td>
<td>Name</td>
<td>Designation</td>
</tr>
</table>
<select id="select_id" style="float:right">
<option>--select--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br/>
<br/>
<button onclick="delete_row()" style="float:right">remove</button>
<button onclick="include()" style="float:right">add</button>
When adding a new row, give the newly added rows an attribute that holds it's id value. Then you can delete all the rows whose attribute value is equal to selected id in dropmenu.
you can try below:
function include(){
var table = document.getElementById("table");
var id = document.getElementById("select_id").value;
var table = document.getElementById("table");
var row = table.insertRow();
// give the new row an attribute that can identify itself
row.setAttribute("emplId",id);
id=id-1;
var col1 = row.insertCell(0);
var col2 = row.insertCell(1);
var col3 = row.insertCell(2);
col1.innerHTML = employees[id][0];
col2.innerHTML = employees[id][1];
col3.innerHTML = employees[id][2];
}
function delete_row() {
var table = document.getElementById("table");
var id = document.getElementById("select_id").value;
for(var i = 0; i<table.rows.length; i++) { // iterate through the rows
var rowEmplId = table.rows[i].getAttribute("emplId");
if(rowEmplId==id) { // found a row matches the selected option
table.deleteRow(i); // remove this row
i--; // we just removed a row, so we need to adjust the cursor
}
}
}
I have Javascript like the following:
function addRow(table1) {
var table = document.getElementById(table1);
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;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
}
}
}
And HTML like the following:
<input type="button" value="Insert row" onclick="addRow('table1')" />
<table id="table1" border=1>
<tr>
<td rowspan=2><input type="text" name="txt1"></td>
<td><input type="text" name="txt2"></td>
</tr>
<tr>
<td><input type="text" name="txt3"></td>
</tr>
</table>
I have a row with rowspan=2, and two rows with no rowspan. How do I write the following line so that once the user clicks the Insert Row button, three textboxes will be added into the new row?
newcell.innerHTML = table.rows[0].cells.innerHTML;
Note that in your code you have:
> newcell.innerHTML = table.rows[0].cells.innerHTML;
I think you mean:
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
But anyway, have you considered using a cloned row instead? e.g. something like the following (untested):
function addRow(tableID) {
var table = document.getElementById(tableID);
var row = table.rows[0].cloneNode(true);
var inputs = row.getElementsByTagName('input');
var i = inputs.length;
while (i--) {
if (inputs[i].type = 'text') {
inputs[i].vaule = '';
// Might want to change other properties too
}
}
table.tBodies[0].appendChild(row);
}
We have a specific functionality where we need to add dynamic rows. In each of the row for the third column there is a button to add combo where it should be able to add extra combo in that cell. We have tried appendChild but is not working. Any idea how to add extra combo boxes. Below is the codes and function to do that is addSubRow.
<HTML>
<HEAD>
<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;
newcell.innerHTML = newcell.innerHTML +"<br> TEST";
//alert(newcell.childNodes);
/*switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id = "input" + rowCount;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
newcell.childNodes[0].id = "checkbox" + rowCount;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
newcell.childNodes[0].id = "select" + rowCount;
break;
}*
if(newcell.childNodes[0].type=="button")
{
alert("TEST");
newcell.childNodes[0].id=rowCount;
}*/
}
var table = document.getElementById(tableID);
var rows = table.getElementsByTagName('tr');
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
row.name="row"+i;
var rowName = "row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
col.id="col_"+i+"_"+j;
col.name="col_"+i+"_"+j;
var cels = rows[i].getElementsByTagName('td')[j];
var realKids = 0,count = 0;
kids = cels.childNodes.length;
while(count < kids){
if(cels.childNodes[i].nodeType != 3){
realKids++;
}
count++;
}
alert("I : "+i+" "+"J : "+j+" "+"realKids :"+cels.childElementCount);
//alert();
}
}
}
function addSubRow(tableID,colID) {
var tdID = document.getElementById(colID);
var table = document.getElementById(tableID);
var comboBox1 = table.rows[0].cells[2].childNodes[1];
comboBox1 = comboBox1;
tdID.appendChild(comboBox1);
//tdID.appendChild(comboBox1);
//tdID.appendChild(comboBox1);
}
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) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
var table = document.getElementById(tableID);
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
//alert("J : "+j);
col.id="col"+i;
if(j==0)
{
}
else if(j==1)
{
}
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" name="txt"/></TD>
<TD id="col_0_2">
<INPUT type="button" value="Add Combo" onclick="addSubRow('dataTable','col_0_2')" />
<SELECT name="country">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
I'm not sure if this is what you really want, but here's a working function addSubRow function for appending a combobox.
I added some comments to explain what I did:
function addSubRow(tableID,colID) {
var tdID = document.getElementById(colID);
var table = document.getElementById(tableID);
// Create a new combobox element
var new_comboBox = document.createElement('select');
// Define / Add new combobox's attributes here
//new_comboBox.setAttribute('id', 'something');
// ...
// ...
// Add new combobox's options - you may use a 'for' loop...
var option_1 = document.createElement('option');
option_1.setAttribute('value', '1');
var txt_1 = document.createTextNode("OPTION 1");
option_1.appendChild(txt_1);
var option_2 = document.createElement('option');
option_2.setAttribute('value', '2');
var txt_2 = document.createTextNode("OPTION 2");
option_2.appendChild(txt_2);
var option_3 = document.createElement('option');
option_3.setAttribute('value', '3');
var txt_3 = document.createTextNode("OPTION 3");
option_3.appendChild(txt_3);
// ...
// ...
// Appending options to the new combobox
new_comboBox.appendChild(option_1);
new_comboBox.appendChild(option_2);
new_comboBox.appendChild(option_3);
// ...
// ...
// Appending the combobox to the TD
tdID.appendChild(new_comboBox);
}
PS:
Pay attention when defining the combobox's attributes and its options' attributes
I don't think that you need to use the table's ID tableID, in your function. You may simplify your function addSubRow by rmoving this argument?
Hope this helps mate.
I have a HTML form which allows a user to add rows ad hoc using JavaScript.
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:
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);
}
}
The PHP code
$job = $_POST['job'];
$comment = $_POST['comment'];
//code to connect to database
$add_stmt = $mysqli->prepare("INSERT INTO job (job, comment) VALUES (?, ?)");
$foreach($job as $a => $b) {
$add_stmt->bind_param("ss", $job[$a], $comment[$a]);
$add_stmt->execute();
}
When I click on the "add entry" button, a row will be successfully created. However, only data in the first row will be submitted to the database. Using
echo "row count is" . count($_POST['job']);
I got "row count is 1" even though I have several rows of data.
Can somebody figure out what might have gone wrong with my code? Thanks a bunch!
You have to set name property for fields that you add:
// create array with names
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";
// set name
newentry.name = names[i];
newcell.appendChild(newentry);
}
}
You can try make two files: index.html and send.php and insert this content:
index.html:
<html>
<head>
<script>
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.name = names[i];
newentry.type = "text";
newcell.appendChild(newentry);
}
}
</script>
</head>
<body>
<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"/>
</form>
</body>
</html>
send.php:
<?php
$job = $_POST['job'];
$comment = $_POST['comment'];
var_dump($job);
var_dump($comment);
?>
And run on you server - this works for me. Make sure that you have names set properly.