I'm trying to add new row to table which is look's like this:
<table class="table table-striped">
<tbody id="dconTable">
<th><input type="text" class="span12" id="lbld"></th>
<th><input type="text" class="span12" id="edizmd"></th>
<th><input type="text" class="span12" id="idd"></th>
<th><input type="text" class="span12" id="ad"></th>
<th><input type="text" class="span12" id="bd"></th>
<th><input type="text" class="span12" id="en_spard"></th>
<th><input type="text" class="span12" id="spard"></th>
<th><input type="text" class="span12" id="en_periodd"></th>
<th><input type="text" class="span12" id="periodd"></th>
</tbody>
</table>
I using script which I found on the internet. And I want him also write id's in new cells (like id="lbld_1" etc). Here 's the code.
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++) {
colName = table.rows[0].cells[i].parentNode.children[1].getAttribute('id') +"_"+ i;
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
newcell.childNodes[0].value = "";
newcell.parentNode.children[1].setAttribute('id',colName);
colName = "";
}
};
Console says:
Uncaught TypeError: Cannot call method 'setAttribute' of undefined
Show me my mistake, please. Thanks.
Your code doesn't make any sense to me:
table.rows[0].cells[i].parentNode.children[1];
//===
table.rows[0].cells[1];
cells are children of rows, so get the parentNode of a row, and it'll return a row, get one of its children and you're back at the level of the cells (if you're lucky! - some browsers will include whitespace, or comments in the nodelist).Besides, if you need an id, just anElem.id will do, getAttribute() is a bit much.
So this would be what you're trying to do:
colName = table.rows[0].cells[i].id;
newcell.id = colName;
But that's creating multiple elements with the same ID, which is impossible. In real life, if someone else had my ID, I'd have a problem. Same logic applies to ID's in the DOM: they are unique! So try:
colName = table.rows[0].cells[i].id.split('_')[0];
newcell.id = colName+'_'+i;
Lastly, you don't seem to be appending your elements, so add table.rows[0].appendChild(newCell);, too
Related
I have a form that allowed user add row dynamically. Inside the form have array radio button.
Question:
When I try click on second row's radio button or other raw, the radio button value will show in first column only and other have an offset error.
At the beginning, in my concept is the value will stored according to array column turned out is not.
So, I try using JavaScript to set each raw radio button's value but it show this error:
Uncaught TypeError: Cannot read property '2' of null
function addRow(tableID) {
var table = document.getElementById(tableID);
var radioB = document.getElementById(BX_related);
var rowCount = table.rows.length;
// limit the user from creating fields more than your limits
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[1].cells[i].innerHTML; //row[which table u need to duplicate]
table.rows[rowCount].cells[0].innerHTML = rowCount;
}
radioB[rowCount].value = rowCount;
}
<table id="dataTable" class="form" border="0">
<tbody>
<tr><th>Bil.</th><th>Nama</th><th>Umur</th><th>Dij./Ting.</th><th>Pekerjaan</th><th>Catatan</th><th>Berkenaan</th></tr>
<tr ><td>1</td>
<td><input type="text" name="BX_name[]" size="30"></td>
<td><input type="text" name="BX_age[]"size="2" ></td>
<td><input type="text" name="BX_study[]"size="8"></td>
<td><input type="text" name="BX_work[]" size="10"></td>
<td><input type="text" name="BX_note[]"size="15"></td>
<td> <input type="radio" name="BX_related[]" id="BX_related" value="" required></td></tr>
</tbody>
</table>
The PHP part:
<?php
$i =0;
if(isset($_POST)=='submit'){
$BX_name=$_POST['BX_name'];
$BX_age=$_POST['BX_age'];
$BX_related = $_POST['BX_related'];
echo $BX_related;
foreach($BX_name as $a => $b)
{
$i ++;
echo "<br> $i";
echo "name: ";
echo $BX_name[$a];
}
}
?>
Anyone have a better solution?
Change
<input type="radio" name="BX_related[]" id="BX_related" value="" required>
to
<input type="radio" name="BX_related[]" class="BX_related" value="" required></td>
Also in addRow function , instead of
var radioB = document.getElementById(BX_related);
use
var radioB = document.getElementsByClassName('BX_related);
Thats it!!
I am creating a form where the user can dynamically add rows. Everything works fine except one thing: I cannot add class to certain input element created by the user:
This is how I add rows:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
(Courtesy of this site)
Form:
<TABLE id="dataTable" width="350px" border="1" class="plantable">
<TR>
<TH></TH>
<TH>From</TH>
<TH>To</TH>
<TH>When</TH>
</TR>
<TR>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<TD><INPUT type="text" name="from[]"/></TD>
<TD><INPUT type="text" name="to[]"/></TD>
<TD><INPUT type="text" name="when[]" class="datepicker"/></TD>
</TR>
</TABLE>
<br/>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" class="add_remove_row" />
Here I gave an class="datepicker" to the when named input box. But the next rows do not have this property.
If that matters, by click on that input object, I open a datepicker with the help of this site. When I click the when named input box in the rows I dynamically create, the datepicker does not show hence it does not inherit the class property. It works fine for the first row which is not dynamically created.
How do I add the class to the element?
I have the following problem. I would like to add some data to a table using label values (in this case 7 & 5) but every time I try to add a value, the cells show the message "undefined". The main idea is to create a table which values are going to be used to draw a bar chart (graph) using the highcharts library
<h2>Add Row in JavaScript</h2>
<table id="table" cellspacing="0" border="1">
<tbody>
<tr>
<td>Name</td>
<td>Address</td>
</tr>
</tbody>
</table>
<button onclick="javascript:addRow('table')">Add row</button>
<br></br>
<label id="txt1" value="7" text="a">label 1</label>
<label id="txt2" value="5" text="b">label 2</label>
Script:
function addRow(id){
var label = ($("#txt1").val());
var label2 = ($("#txt2").val());
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr");
var data1 = document.createElement("td");
data1.appendChild(document.createTextNode(label.value));
var data2 = document.createElement("td");
data2.appendChild(document.createTextNode(label2.value));
row.appendChild(data1);
row.appendChild(data2);
tbody.appendChild(row);
}
Example in JFiddle
Code
Highcharts library
Code
It seems you have taken label instead of textbox, anyway below is working code.
function addRow(id) {
var label = ($("#txt1").attr("value"));
var label2 = ($("#txt2").attr("value"));
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr");
var data1 = document.createElement("td");
data1.appendChild(document.createTextNode(label));
var data2 = document.createElement("td");
data2.appendChild(document.createTextNode(label2));
row.appendChild(data1);
row.appendChild(data2);
tbody.appendChild(row);
}
I know there are like thousands of answers on Stack Overflow about this specific topic, but I have been reading them for 3 days and nights already trying to apply solutions to my code with no success.
The problem is that addRow works fine, but DeleteRow doesn't work at all.
Here is my HTML:
<input type="button" value="add" onClick="addRow('dataTable')" />
<input type="button" value="delete" onclick="deleteRow(this)"/>
<p></p>
</p>
</table>
<table id="dataTable" class="cv" border="1">
<tr>
<td>
<input type="text" style="width:100%" placeholder="ievadiet valodu">
</td>
<td>
<select id="BX_gender" name="BX_gender" required="required">
<option>dzimtā valoda</option>
<option>teicami</option>
<option>labi</option>
<option>viduvēji</option>
<option>pamatzināšanas</option>
</select>
</td>
<td>
<select id="BX_gender" name="BX_gender" required="required">
<option>teicami</option>
<option>labi</option>
<option>viduvēji</option>
<option>pamatzināšanas</option>
</select>
</td>
<td>
<select id="BX_gender" name="BX_gender" required="required">
<option>teicami</option>
<option>labi</option>
<option>viduvēji</option>
<option>pamatzināšanas</option>
</select>
</td>
</tr>
</table>
<div class="clear"></div>
</fieldset>
javascript:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 5) {
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;
}
} else {
alert("Maksimālais ierakstu skaits ir 7.");
}
}
function DeleteRow(o) {
//no clue what to put here?
var p = o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
Here is a fiddle with code working (only the addRow function): http://jsfiddle.net/7AeDQ/690/
Assuming you want to delete the last row, you can use something like this
function deleteRow() {
var table = document.getElementById("dataTable");
var tbody = table.tBodies[0];
tbody.removeChild(tbody.lastChild);
}
Updated fiddle here
Using something like this, you don't need to traverse the DOM using parentNode.parentNode...
I have a problem that I can't get my head around (pretty new to JavaScript). Need to know how to increment variables in HTML with an document.createElement event (if that's the right terminology).
I need to increment the 'value' attribute every time the "Add Row" button is clicked and vise versa for the "Delete Row" button.
So far I have:
HTML
<div id='ctrl_container'>
<form action='$thisuri' method='post' id='spa' name='date2'>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" border='0' cellspacing='0' cellpadding='0' >
<tr>
<th> Select </th>
<th> ID </th>
<th> Question </th>
</tr>
<tbody>
<tr>
<td> <input type="checkbox" name="chk[]" /> </td>
<td> 1<input type="hidden" name="Q[]" value="1" /> </td>
<td> <input type="text" name="txtbox[]" /> </td>
</tr>
</tbody>
</table>
<input type='Submit' value='Submit Planned Audit' name='send'>
</form>
</div>
JavaScript
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = document.getElementById(tableID).getElementsByTagName('tbody')
[1].getElementsByTagName('tr').length;
var row = table.insertRow(rowCount +1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "hidden";
element1.name = "Q[]";
element1.value = rowCount +1;
cell2.appendChild(element1);
cell2.innerHTML = rowCount +1;
}
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);
}
}
Can someone give me some pointers?
Have a look at this jsFiddle: http://jsfiddle.net/pDxnb/1/
It will definitely give you some pointers, since the row is actually being added visibly now. (The rowcount is not the problem here I guess)
The problem was and still is, is that you are adding empty cells as a row. I have added cell2 to the table and we can see things are happening.
var cell2 = row.insertCell(1);
cell2.appendChild(element1);
cell2.innerHTML = rowCount +1;
also what I did to debug is:
alert(rowCount);
You should be able to figure the rest out for yourself. If you need anymore help please comment below.
TIP:
Maybe it would be better to get your highest ID incremented everytime adding a row, and don't worry about the deletion. This way you can never have the same ID's
If you want to increment by name :
var hiddenInputs = document.getElementsByName("Q[]");
EDIT :
for (var i = 0; i <= hiddenInputs.length; i++) {
hiddenInputs[i].value = i + 1;
}
Decrement has the same logic. Now, value of the hiddenInput(DOM element) consist your row count