We Keep Coding

Copy row from any table

I have an HTML page with 3 tables on it. I want to be able to copy specific cells in a table row to the clipboard. The row could come from any of the 3 tables.
Using the code below, I highlight and copy the row for a table with an ID of "final". How do I make this work for any of the 3 tables? I tried by getElementsByTagName and labeling them the same name but did not work - understandably so. Is there a way to designate the selected table? I am trying to avoid copying the whole row and might eventually add the formatted msg to a new page rather than copy to the clipboard.
function copy_highlight_row() {
var table = document.getElementById('final');
var cells = table.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
// Take each cell
var cell = cells[i];
// do something on onclick event for cell
cell.onclick = function () {
// Get the row id where the cell exists
var rowId = this.parentNode.rowIndex;
var rowsNotSelected = table.getElementsByTagName('tr');
for (var row = 0; row < rowsNotSelected.length; row++) {
rowsNotSelected[row].style.backgroundColor = "";
rowsNotSelected[row].classList.remove('selected');
}
var rowSelected = table.getElementsByTagName('tr')[rowId];
rowSelected.style.backgroundColor = "yellow";
rowSelected.className += " selected";
var cellId = this.cellIndex + 1
msg = 'Title: ' + rowSelected.cells[0].innerHTML;
msg += '\r\nDescription: ' + rowSelected.cells[1].innerHTML;
msg += '\n\nLink: ' + rowSelected.cells[2].innerHTML;
msg += '\nPublication Date: ' + rowSelected.cells[3].innerHTML;
//msg += '\nThe cell value is: ' + this.innerHTML copies cell selected
navigator.clipboard.writeText(msg);
}
}
};

Based on a couple of the suggestions I came up with the following:
function highlight_row() {
var cells = document.querySelectorAll('td')
for (var i = 0; i < cells.length; i++) {
// Take each cell
var cell = cells[i];
// do something on onclick event for cell
cell.onclick = function () {
// Get the row id where the cell exists
var rowId = this.parentNode.rowIndex;
var t_ID = this.closest('table').id
var table=document.getElementById(t_ID);
var rowsNotSelected = table.getElementsByTagName('tr');
for (var row = 0; row < rowsNotSelected.length; row++) {
rowsNotSelected[row].style.backgroundColor = "";
rowsNotSelected[row].classList.remove('selected');
}
var rowSelected = table.getElementsByTagName('tr')[rowId];
rowSelected.style.backgroundColor = "yellow";
rowSelected.className += " selected";
var cellId = this.cellIndex + 1
msg = 'Title: ' + rowSelected.cells[0].innerHTML;
msg += '\r\nDescription: ' + rowSelected.cells[1].innerHTML;
msg += '\n\nLink: ' + rowSelected.cells[2].innerHTML;
msg += '\nPublication Date: ' + rowSelected.cells[3].innerHTML;
navigator.clipboard.writeText(msg);
}
}
}
At the end of the html I call the function. The HTML contains 3 tables and this enabled me to click on any table, highlight the row, and copy the correct range of cells.

Dynamic row addition at the bottom of Table in IE

Based on the button click event, I want to add rows dynamically at the bottom of an existing table.
I had done the same using Javascript which is given below. It is working fine in Chrome browser whereas in IE the rows are getting added at the top rather than at the bottom.
If I click the button multiple times then could see that all the rows are getting added at the top one after the other in IE.
function addRow(tableID) {
var table = document.getElementById(tableID);
var tbody = table.getElementsByTagName('tbody')[0];
var rowCount = table.querySelectorAll("tbody tr").length;
var row = tbody.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.classList.add("PadLeft10");
cell1.classList.add("PadBottom5");
cell1.classList.add("textcenter");
cell1.width = "2%";
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "element1[" + index + "].selected";
element1.id = "element1[" + index + "].selected";
cell1.appendChild(element1);
[...]
}
I could see in the docs that tbody.insertRow(-1) should append row at the last in both IE and Chrome, but for me in IE it is getting added at the top. I tried many ways but in all it works fine in Chrome but not in IE.
Any help?

If the insertRow part is the problem, you can do this to reliably add to the end instead:
var row = document.createElement("tr");
tbody.appendChild(row);
Similarly, var cell1 = row.insertCell(0); (if it is also a problem) can be:
var cell1 = document.createElement("tr");
row.insertBefore(cell1, row.firstChild);
Finally, MDN says that IE has long supported insertAdjacentHTML (all the way back to IE4), so that entire method could be replaced with the following if you like:
function addRow(tableID) {
var table = document.getElementById(tableID);
var tbody = table.querySelector("tbody");
var rowCount = table.querySelectorAll("tr").length; // Or: `= table.rows.length;`
// ***Where does `index` come from? Did you mean `rowCount`?
var name = "element1[" + index + "].selected";
var html =
'<tr>' +
'<td class="PadLeft10 PadBottom5 textcenter" width="2%">' +
'<input type="checkbox" name="' + name + '" id="' + name + '">' +
'</td>' +
'</tr>';
tbody.insertAdjacentHTML("beforeend", html);
// ...
}

adding row and then deleting causes duplicate rows

So when I add new rows each row is given an id that increments according the number of rows already added. if I add three rows and then delete the second row, then add another row, now the new row has an id the same as the old third row.
is there an easier way to do this or a loop that i can perform to check for an existing number.
$('body').delegate('.remove', 'click', function() {
$(this).parent().parent().remove();
});
function addnewrow() {
var n = ($('.detail tr').length - 0) + 1;
var tr = '<tr>' +
'<td>' + n + '</td>' +
'<td><select id="drop' + n + '" class="select-service" name="prodService[]"> <
option value = "" > -Choose Service - < /option></select > < /td>'+
'<td id="desc' + n + '"></td>' +
'<td>Delete</td>' +
'</tr>';

Try this way...Put counter outside of the function.
$('body').on("click", '.remove', function() {
$(this).closest("tr").remove();
});
var n = 1;
$('body').on('click', '.add-new-row', function() {
var $tr = $("<tr />");
var $td1 = $("<td />").text(n).appendTo($tr);
var $td2 = $("<td />").append("<select id='drop" + n + "' class='select-service' name='prodService[]' />").appendTo($tr);
var $td3 = $("<td id='desc" + n + "' />").appendTo($tr);
var $td4 = $("<td />").append("<a href='#' class='remove'>Delete</a>").appendTo($tr);
$("table").append($tr);
n++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-new-row">Add New Row</button>
<table></table>

Using jQuery is nice because you can avoid writing these giant element strings, so I've gone ahead and rewritten your addnewrow() function to (hopefully) make it slightly cleaner.
As far as determining the IDs, while I believe what talg123 suggested in the comments would be fine - storing a global variable that just increases by 1 each time you add a new row - I personally try to avoid polluting the global scope where I can.
You can use this line to find the last drop id, and remove the "drop" text from it so you're just left with a number.
$("tr select").last().attr("id").replace("drop", "");
Unfortunately, this will break if there are no rows becuase it won't be able to find any select elements. So, first we have to check if they exist:
+$("tr select").length ? (exists) : (does not exist)
If it doesn't exist, we'll just use 1.
Put that all together, and you've got:
//If select exists Get last ID and remove "drop" from it, and add 1 Else, 1
$("tr select").length ? 1 + +$("tr select").last().attr("id").replace("drop", "") : 1;
$('body').on("click", '.remove', function() {
$(this).closest("tr").remove();
});
$('body').on('click', '.add-new-row', function() {
var nextId = $("tr select").length ? 1 + +$("tr select").last().attr("id").replace("drop", "") : 1;
//Create a new select list
var $selectList = $("<select id='drop" + nextId + "' class='select-service' name='prodService[]' />");
$selectList.append("<option> -Select Service- </option"); //Append option 1
$selectList.append("<option> Another example </option"); //Append option 2
var $tr = $("<tr />"); //Create a new table row
var $td1 = $("<td />").text(nextId).appendTo($tr); //Create first cell. Set text to nextId. Add it to the row.
var $td2 = $("<td />").append($selectList).appendTo($tr); //Create second cell. Add our select list to it. Add it to the row.
var $td3 = $("<td id='desc" + nextId + "' />").appendTo($tr); //Create third cell. Set its id to 'desc{nextId}'. Add it to the row.
var $td4 = $("<td />").append("<a href='#' class='remove'>Delete</a>").appendTo($tr); //Create fourth cell. Add link to it. Add it to the row.
$("table").append($tr); //Add the row to the table
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-new-row">Add New Row</button>
<table></table>

How to append tds into tableRows?

I'm trying to append different <td>-elements to corresponding tr-elements, but no matter, what I am trying: it does not work :-/ Unfortunately I'm not able to show you an complete jsfiddle, because the whole table stuff is rather complex and depends on a map and stuff like that, but I hope some code snippets are also okay.
Table-Structure (header)
var table = createElement('table');
table.className = "table";
table.id = "table";
var header = table.createTHead();
var row = header.insertRow(0);
var cell0 = row.insertCell(0);
cell0.innerHTML = "Indicator"
var cell1 = row.insertCell(1);
cell1.innerHTML = "Current value"
var cell2 = row.insertCell(2);
cell2.innerHTML = "High value"
var cell3 = row.insertCell(3);
cell3.innerHTML = "Low value"
var cell4 = row.insertCell(4);
cell4.innerHTML = "Average";
var cell5 = row.insertCell(5);
cell5.innerHTML = "Pic";
tbody = table.appendChild(document.createElement('tbody'));
Then I'm using a for-loop, where the rest of the table is created:
//"key" is the description of the "value"
for (var key in values) {
//...
//method to calculate the values
...
//append values to tbody
$(table).find(tbody).append("<tr>");
$(table).find(tbody).append( "<td>"+(indicatorValue));
$(table).find(tbody).append( "<td>"+(regionValue));
$(table).find(tbody).append( "<td>"+(bestValues));
$(table).find(tbody).append( "<td>"+(worstValues));
$(table).find(tbody).append( "<td>"+(average));
//append image to a td-element
var img = "<img src='img/green_circle.png' />";
if (picIdentifier != 'green') {
img = "<img src='img/red_circle.png' />";
}
$(table).find(tbody).append( "<td>"+ img +"</td>");
}
Using the above code, the table looks like the following jsfiddle: http://jsfiddle.net/nwd6na53/2/
As you can see, the td-elements in the tbody are not wrapped in the tr-element, but the table-rows are empty.
Do you have any tip how to put the tds into the tr-elements? Any help is much appreciated!

Within your for loop, you need something more like this:
for (var i = 0; i <= 10; i++) {
var row = $('<tr></tr>');
$(row).append('<td>row ' + i + ', column1</td>');
$(row).append('<td>row ' + i + ', column2</td>');
$(row).append('<td>row ' + i + ', column3</td>');
$('#mytable').find('tbody').append(row);
}
Here's a fiddle with a code example:
https://jsfiddle.net/u2enny6o/3/
Note that I include complete tags in the append().
Better yet would be to use the insertRow() and insertCell() approach you use for the header section.

The answer of #Marc doesn't run well. See this
jsfiddle fail.
I think you should create a variable for an element tr. And append this tr to the tbody. For example, see this jsfiddle success :
var row = '<tr>' + '<td>' + indicatorValue + '</td><td>' + regionValue + '</td>' + '<td>' + bestValues + '</td></tr>';
$('table').find('tbody').append(row);

Dynamic adding input fields into columns

I had this block of code in javascript which does add dynamic input fields. Every thing works fine at this point. My question is how would I add more input fields within the table in other cell respectively with the village name input fields? When user Add Village 1/Remove Village 1, either of the action should add/remove aligning input field on column named:Type of participatory forest management, Year participatory management process started and Size of forest. The input fields increment of the columns mentioned above should reflect the increment of dynamic input field of village name column. Later I will use the dynamic input fields with Php on sending the values to database. Thanks for your time!
Below is script:
script code:
<script language="JavaScript" type="text/javascript">
function getById(e){return document.getElementById(e);}
function newElement(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function addForestName()
{
var tbl = getById('tblSample'); //note the single line generic functions written above
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// Column which has iteration count
var cell_no = row.insertCell(0);
var textNode = newTxt(iteration);
cell_no.appendChild(textNode);
// Column which has the forest name
var frstNameCell = row.insertCell(1);
var el_input = newElement('input'); //create forest name input
el_input.type = 'text';
el_input.name = 'forest_text_' + iteration;
el_input.id = 'forest_text_' + iteration;
el_input.size = 40;
frstNameCell.appendChild(el_input);
// Column which has the village name
var villageNameCell = row.insertCell(2);
var el_label = newElement('label');
el_label.for = 'village_text_' + iteration + '_1';
var el_labelValue = '1.';
textNode = newTxt(el_labelValue);
el_label.appendChild(textNode);
villageNameCell.appendChild(el_label);
el_input = newElement('input');
el_input.type = 'text';
el_input.name = 'village_text_' + iteration + '_1';
el_input.id = 'village_text_' + iteration + '_1';
el_input.size = 40;
villageNameCell.appendChild(el_input);
el_btn = newElement('input'); //create village name add button
el_btn.type = 'button';
el_btn.name = 'village_btn_' + iteration;
el_btn.id = 'village_btn_' + iteration;
el_btn.value = 'Add Village Forest ' + iteration;
el_btn.addEventListener('click',addMoreVillageNames, false);
villageNameCell.appendChild(el_btn);
el_btn = newElement('input'); //create village name remove button
el_btn.type = 'button';
el_btn.name = 'village_rembtn_' + iteration;
el_btn.id = 'village_rembtn_' + iteration;
el_btn.value = 'Remove Village Forest ' + iteration;
el_btn.addEventListener('click',removeVillageName, false);
villageNameCell.appendChild(el_btn);
var frstManagCell = row.insertCell(3); // create forest management input
el_input = newElement('input');
el_input.type = 'text';
el_input.name = 'frstManage_text_' + iteration + '_1';
el_input.id = 'frstManage_text_' + iteration + '_1';
el_input.size = 40;
frstManagCell.appendChild(el_input);
var yerPartCell = row.insertCell(4); // create year participatory input
el_input = newElement('input');
el_input.type = 'text';
el_input.name = 'yrPart_text_' + iteration + '_1';
el_input.id = 'yrPart_text_' + iteration + '_1';
el_input.size = 40;
yerPartCell.appendChild(el_input);
var frstSizeCell = row.insertCell(5); // create forest size input
el_input = newElement('input');
el_input.type = 'text';
el_input.name = 'frstSize_text_' + iteration + '_1';
el_input.id = 'frstSize_text_' + iteration + '_1';
el_input.size = 40;
frstSizeCell.appendChild(el_input);
}
function addMoreVillageNames(){
rowNumber = (this.id).substring((this.id.length)-1, this.id.length); //to get Row Number where one more input needs to be added.
var childElCount;
var parentCell = this.parentNode;
var inputCount = parentCell.getElementsByTagName('label').length; //to get the count of input fields present already
var newFieldNo = inputCount + 1; //input current count by 1 to dynamically set next number for the new field
//temporarily remove the add and remove buttons to insert the new field before it.we are doing this loop only twice because we know the last 2 input elements are always the two buttons
for (var i=0; i<2; i++){
childElCount = parentCell.getElementsByTagName('input').length; //get count of child input elements (including text boxes);
parentCell.removeChild(parentCell.getElementsByTagName('input')[childElCount-1]);
}
var lineBreak = newElement('br');
parentCell.appendChild(lineBreak); //add a line break after the first field
var el_label = newElement('label');
el_label.for = 'village_text_' + rowNumber + '_' + newFieldNo;
var el_labelValue = newFieldNo + '.';
var textNode = newTxt(el_labelValue);
el_label.appendChild(textNode);
parentCell.appendChild(el_label); //create and add label
var el_input = newElement('input');
el_input.type = 'text';
el_input.name = 'village_text_' + rowNumber + '_' + newFieldNo;
el_input.id = 'village_text_' + rowNumber + '_' + newFieldNo;
el_input.size = 40;
parentCell.appendChild(el_input); //create and add input field
var el_btn = newElement('input'); //add the village name add button again
el_btn.type = 'button';
el_btn.name = 'village_btn_' + rowNumber;
el_btn.id = 'village_btn_' + rowNumber;
el_btn.value = 'Add Village ' + rowNumber;
el_btn.addEventListener('click',addMoreVillageNames, false);
parentCell.appendChild(el_btn);
el_btn = newElement('input'); //create village name remove button
el_btn.type = 'button';
el_btn.name = 'village_rembtn_' + rowNumber;
el_btn.id = 'village_rembtn_' + rowNumber;
el_btn.value = 'Remove Village ' + rowNumber;
el_btn.addEventListener('click',removeVillageName, false);
parentCell.appendChild(el_btn);
}
function removeForestName()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function removeVillageName()
{
var rowNumber = (this.id).substring((this.id.length)-1, this.id.length); //to get Row Number where one more input needs to be added.
var parentCell = this.parentNode;
var lblCount = parentCell.getElementsByTagName('label').length;
var inputCount = parentCell.getElementsByTagName('input').length;
var brCount = parentCell.getElementsByTagName('br').length;
//Remove will not happen if there is only one label-input combo left.
if(lblCount>1)
parentCell.removeChild(parentCell.getElementsByTagName('label')[lblCount-1]);
if(inputCount>3)
parentCell.removeChild(parentCell.getElementsByTagName('input')[inputCount-3]); //Delete the third last element because the last two are always the two buttons.
parentCell.removeChild(parentCell.getElementsByTagName('br')[brCount-1]);
}
window.onload = addForestName;
</script>
<form action="tableaddrow_nw.html" method="get">
<table width="640" border="1" id="tblSample">
<tr>
<td>No.</td>
<td>Forest Name</td>
<td width="40">Name of the villages <br />participating in managing</td>
<td>Type of participatory forest management</td>
<td>Year participatory management process started</td>
<td>Size of forest</td>
</tr>
</table>
</form>
<p>
<input type="button" value="Add" onclick="addForestName();" />
<input type="button" value="Remove" onclick="removeForestName();" />
</p>

If I understood your question correctly, the below is what you are looking for. Using the following method you can get hold of the required table column (Column Number is hard coded because this is just a sample). Once you have got hold of the required column, adding/removing fields should be straight-forward. Check out this Fiddle for a working sample.
var tbl = document.getElementById('tblSample');
var frstMgmtCell = tbl.rows[rowNumber].cells[3]; //Get hold of the Forest Mgmt Column of that specific row.
On a side note, there are a lot of repeated items which you might want to convert into separate functions for better maintainability.