Develop Reference

Why am I not getting the IDs from innerHTML?

I have HTML & javascript code where you can click a button to add a row to an existing table. I want to make sure that each row's dropdowns have the correct IDs in ascending order. The middle rows can get deleted, and I need to adjust the IDs.
function addRow(){
var table = document.getElementById('myTable');
//Get the number of rows in the table, and use (+1) value for the IDs later
var rowCount = table.tBodies[0].rows.length;
var tbodyRef = table.getElementsByTagName('tbody')[0];
// Insert a row at the end of table
var newRow = tbodyRef.insertRow();
// Insert a cell at the end of the row
var cell0 = newRow.insertCell(-1);
cell0.innerHTML = '<select id="firstDropdown' + (rowCount + 1) + '"></select>';
var cell1 = newRow.insertCell(-1);
cell1.innerHTML = '<select id="secondDropdown' + (rowCount + 1) + '"></select>';
var cell2 = newRow.insertCell(-1);
cell2.innerHTML = '<button onclick=deleteRow()>Delete</button>';
/*Here, I want to get the list of ID's of the firstDropdown of
each row (for debugging purposes). But this is not printing anything.
Why is this code below not printing the first dropdown's ids of each row? */
console.log("------------------------");
for(var i=0; i<table.tBodies[0].rows.length; i++){
console.log(table.tBodies[0].rows[i].cells[0].id);
}
}
function deleteRow(){
var td = event.target.parentNode;
var tr = td.parentNode;
tr.parentNode.removeChild(tr);
}
My HTML code is below:
<button onclick=addRow()>Add row</button>
<br>
<table id="myTable">
<thead>
<th>1st dropdown</th>
<th>2nd dropdown</th>
<th>Remove</th>
</thead>
<tbody>
<!--Rows will be added/deleted dynamically-->
</tbody>
</table>
I will need to update dropdowns' IDs later when rows are deleted.
I was hoping to do it the same way: table.tBodies[0].rows[i].cells[0].id = "firstDropdown" + (i+1); but I am not sure if this is even going to work now.

Dynamically created <th> get's lower position why?

Below is the code snippet where I've created <th> using jquery.
My question is, How can I place the dynamically created <th> above the two <td>'s which I've created below.
I've tried to search a lot but all the results where adding to the end only, not to the top of the <td>.
$(document).ready(
function() {
var noOfRow = document.getElementById("addItemTable").rows.length;
var temp = document.getElementById("addItemTable");
var table = temp.getElementsByTagName('tbody')[0];
var row = table.insertRow(-1);
var cell2 = row.insertCell(0);
var cell3 = row.insertCell(1);
cell2.innerHTML="this is inside table div";
cell2.style="border: dashed;"
cell3.innerHTML="this is inside another another div";
cell3.style="border: dashed;"
var thContent = '<th class="col2">' + '<br>' + 'test' + '&nbsp &nbsp' + '*' + '' + '</th>'
var mainTable = document.getElementById("addItemTable");
$('#addItemTable>tbody>tr').append(thContent);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="m-content" id="elementDiv">
<table id="addItemTable">
<tbody>
</tbody>
</table>
</div>

You must use prepend insead of append :)
$(document).ready(
function() {
var noOfRow = document.getElementById("addItemTable").rows.length;
var temp = document.getElementById("addItemTable");
var table = temp.getElementsByTagName('tbody')[0];
var row = table.insertRow(-1);
var cell2 = row.insertCell(0);
var cell3 = row.insertCell(1);
cell2.innerHTML="this is inside table div";
cell2.style="border: dashed;"
cell3.innerHTML="this is inside another another div";
cell3.style="border: dashed;"
var thContent = '<th class="col2">' + '<br>' + 'test' + '&nbsp &nbsp' + '*' + '' + '</th>'
var mainTable = document.getElementById("addItemTable");
$('#addItemTable>tbody>tr').prepend(thContent);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="m-content" id="elementDiv">
<table id="addItemTable">
<tbody>
</tbody>
</table>
</div>

After deletion changing id of textbox inside cell id not working

I have table using Javascript and I am deleting the rows using a delete function
After the deletion I am trying to reindex the table cell ids
function updateRowCount(){
var table = document.getElementById("ordertable");
var rowcountAfterDelete = document.getElementById("ordertable").rows.length;
for(var i=1;i<rowcountAfterDelete;i++){
table.rows[i].id="row_"+i;
table.rows[i].cells[0].innerHTML=i+"<input type='checkbox' id='chk_" + i + "'>";
table.rows[i].cells[1].id="notes_"+i;
table.rows[i].cells[2].id="amount"+i;
}
}
But the following lines not working:
table.rows[i].cells[1].id="notes_"+i;
table.rows[i].cells[2].id="amount"+i;
<td>'s contains input boxes, it will be like this
<td><input type="text" title="notes"></td>
<td><input type="text" title="amount"></td>
How can I change the id of text box inside <td> or cell ?

I made a jsfiddle here https://jsfiddle.net/an87ka5p/
I updated this to answer the question in the comments
function test() {
var table = document.getElementById("ordertable");
var rowcountAfterDelete = table.rows.length;
for (var i = 0; i < rowcountAfterDelete; i++) {
table.rows[i].id = "row_" + i;
table.rows[i].cells[0].innerHTML = i + "<input type='checkbox' id='chk_" + i + "'>";
table.rows[i].cells[1].getElementsByTagName("input")[0].id = "notes_" + i;
table.rows[i].cells[2].getElementsByTagName("input")[0].id = "amount_" + i;
}
}

How can I insert a <tr> element into a dynamic table?

I hope someone has a clue for me. I am new to javascript and I am trying to build this structure with a dynamically generated table.
<table>
<tr>
<td>value1</td>
<td>value2</td>
<td>value3</td>
<td>value4</td>
</tr>
<tr>
<td>value5</td>
<td>value6</td>
<td>value7</td>
<td>value8</td>
</tr>
<tr>
<td>value9</td>
<td>value10</td>
<td>value11</td>
<td>value12</td>
</tr>
<tr>
<td>value13</td>
<td>value14</td>
<td>value15</td>
<td>value16</td>
</tr>
</table>
What I tried to do is to echo a <tr> after every 4th pair of <td>.
Like this:
var tbody_el = $("#somevalue_id"); //is the id of the table, which needs to be filled with `<tr>` and `<td>`.
var counter = 0;
$.each(TonsOfData.getValues(), function(index, somevalue) {
//var tr_el = $("<tr></tr>");
var td_checkbox_el = $("<td></td>");
var cbName = "cb_" + somevalue.displayName + "_name";
var cbId = "cb_" + somevalue.displayName + "_id";
var inputEl = $("<input type='checkbox' name='" + somevalue.displayName + "' id='" + cbId + "'/>");
inputEl.data("somevalueId", somevalue.id);
inputEl.attr("checked", "checked");
inputEl.change(valueChoicesClick);
var div_value_id = "div_value_" + somevalue.id + "_id";
var div_value_el = $("<div id='" + div_value_id + "' align='left'></div>");
var td_value = $("<td></td>");
td_checkbox_el.append(inputEl);
if(counter == 0 || (counter +1)%4 == 0){
echo "<tr>";
}
td_value.append(td_checkbox_el, "<br> Displayname: " + somevalue.displayName,"<br> Unit: "+ somevalue.unitstring," <br>",div_value_el);
if((counter +1)%4 == 0) {
echo "</tr>";
}
//tbody_el.append(tr_el);
}
);
Is this even possible?
Or am I going a totally wrong way?
Big thanks for any suggestions!!
EDIT:
I found a solution that worked for me. I doubt anyone will have the same issue, but I'd like to share it anyway.
I created a counter that gets incremented in the loop and gave the <td> parts a class-id.
if(counter<4){
td_value = $("<td class='select1'></td>");
}
if(counter>3 && counter <8){
td_value = $("<td class='select2'></td>");
}
if(counter>7 && counter <12){
td_value = $("<td class='select3'></td>");
}
if(counter>11 && counter <16){
td_value = $("<td class='select4'></td>");
}
if(counter>15 && counter <20){
td_value = $("<td class='select5'></td>");
}
After that I used the JQuery wrapAll()-function to add my <tr>. That did the trick.
$('#somevalue_id td.select1').wrapAll('<tr/>');
$('#somevalue_id td.select2').wrapAll('<tr/>');
$('#somevalue_id td.select3').wrapAll('<tr/>');
$('#somevalue_id td.select4').wrapAll('<tr/>');
$('#somevalue_id td.select5').wrapAll('<tr/>');
I know, it is not the most elegant solution but it works.
Thanks again to everyone that gave me hints, you helped me solve this!

You can use jquery and using .each for iterating and getting the fourth element in each iteration using .nth-child and inserting after using .insertAfter

Please find the example to mainuplate the table accordingly.
this is one way you can do it
<table class="test_table" id="test_table">
</table>
var tableEl = $(".test_table");
var noOfRows = 4;
var noOfColumns = 4;
//Empty the table in case there is anything already there
tableEl.each(function(){
var tableElObject = $(this);
for(i=0;i<noOfRows;i++)
{
rowStart = "<tr>";
for(j=0;j<noOfColumns;j++)
{
rowStart +="<td>"+"Test"+i+j+"</td>";
}
tableElObject.append(rowStart+"<tr/>");
}
});
http://jsfiddle.net/qg5hG/

if you want to create tables trs and tds dynamically this way can be better for you....
var table = document.createElement('table');
table.setAttribute('border','0');
table.setAttribute('cellspacing','5');
table.setAttribute('cellpadding','5');
table.setAttribute('width','100%');
var tr = table.insertRow(-1);// "-1"s meaning add tr to end of table if you want to add top of table you must use "0"
tr.id = 'Tr1 ID';
var td = tr.insertCell(-1);
td.innerHTML = 'Inside of TD 1';
var td = tr.insertCell(-1);
td.innerHTML = 'Inside of TD 2';
var tr = table.insertRow(-1);
var td = tr.insertCell(-1);
td.innerHTML = 'Inside of TD 1';
var td = tr.insertCell(-1);
td.innerHTML = 'Inside of TD 2';

JavaScript to show extra form fields

I have a form that has a block called "Product", containing text inputs. Inside that block, the user can press "add item" and have the JS show one more field. Till now everything works.
I've tried to add a function for adding a new "Product" block but no luck. Do you have any hints for me?
Product
Item: <input> Price: <input>
Item: <input> Price: <input>
<a>add item</a> <- this works
<a>add Product</a> <- this is the part that I can't figure out :(
Any help will be appreciated.
Thank you!
Update:
Here is the JS for the Item and Price fields:
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("b.add-item").click(function () {
if(counter>5){ alert("Max 6 items allowed"); return false; }
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html(
'<span class="item">' +
'<label>Item:</label>'+
'<input type="text" name="item1[]" id="textbox' + counter + '" value="" >' +
'<label> Price:</label>'+
'<input type="text" name="price1[]" id="textbox' + counter + '" value="" >' +
'</span>'
);
newTextBoxDiv.appendTo(".items");
counter++;
});
$("b.remove-item").click(function () {
if(counter==1){alert("No more textbox to remove");
return false; } counter--;
$("#TextBoxDiv" + counter).remove();});
$("#getButtonValue").click(function () { var msg = ''; for(i=1; i<counter; i++){ msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); }alert(msg); });
});
</script>

Maybe make a table and add new rows?
HTML:
<table id="myTable">
<tr>
<th>Item</th>
<td><input /></td>
<th>Price</th>
<td><input /></td>
</tr>
<tr>
<th>Item</th>
<td><input /></td>
<th>Price</th>
<td><input /></td>
</tr>
</table>
<a onclick="add_row(); return false;">Add Product</a>
JavaScript:
function add_row()
{
var table = document.getElementById('myTable');
if(!table) return;
// Table row
var row = document.createElement('row');
table.appendChild(row);
// "Item:"
var th1 = document.createElement('th');
th1.innerText = 'Item:'
row.appendChild(th1);
// Item input
var td1 = document.createElement('td');
row.appendChild(td1);
var input1 = document.createElement('input');
td1.appendChild(input1);
// "Price:"
var th2 = document.createElement('th');
th2.innerText = 'Price:'
row.appendChild(th2);
// Price input
var td2 = document.createElement('td');
row.appendChild(td2);
var input2 = document.createElement('input');
td1.appendChild(input2);
}
I think this should work...