I'm trying to copy two dropdown values and add them to a textarea. I copy one just fine but can't copy two. I'm trying to copy the value of 'amount' and the value of 'type' combine them and insert into a textarea. My code:
function copy() {
var sel = document.getElementById("amount");
var text = sel.options[sel.selectedIndex].value;
var out = document.getElementById("textarea");
out.value += text + "\n";
}
var sel1 = document.getElementById("amount");
var sel2 = document.getElementByid("type");
var amt = sel1.options[sel1.selectedIndex].value;
var typ = sel2.options[sel2.selectedIndex].value;
var out = document.getElementById("textarea");
out.value += amt + " " + typ + "\n";
You may want to rename your field named "type" as that could very possibly be a reserved variable name.
Also, I don't see where you are pulling in the value of type? Try this:
function copy() {
var sel = document.getElementById("amount");
var textInput = document.getElementById("some_type");
var text = sel.options[sel.selectedIndex].value + textInput.value;
var out = document.getElementById("textarea");
out.value += text + "\n";
}
Related
I wrote a function that creates new Input fields based on the number of input fields needed. That code is below.
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("Guest " + (i+1)));
var input = document.createElement("input");
input.id = "Guest" + i;
container.appendChild(input);
container.appendChild(document.createElement("br"));
console.log(i.value);
It creates a new Id for each input field. In the function below,depending on the number you set for i, the function creates a generated message.
function sendInput ()
{
var guestNames = document.getElementById("Guest").value
var personName = document.getElementById("people").value;
var eventType = document.getElementById("event").value;
var date = document.getElementById("date").value;
var output = "Dear " + guestNames + " You have been invited to " + personName + "'s " + eventType + " on " + date + " Thank you for coming!!";
document.getElementById('output').innerHTML = output.repeat(i);
}
The problem is it is not collecting the data for guestNames. I am pretty new to JS but have searched and cannot find a solution to my problem. Any feedback wouls be helpful.
IDs are difficult to work with in a dynamic environment, classes are generally the simplest solution. This code will convert your inputs to have classes, then loop through them and collect the names.
So change:
input.id = "Guest" + i;
to
input.setAttribute("class","guest");
And change
var guestNames = document.getElementById("Guest").value
to:
var guests = document.querySelectorAll(".guest");
var guestNames = [];
guests.forEach(function(el){
guestNames.push(el.value);
});
guestNames = guestNames.join(",");
If you are wanting a message for EACH guest, then you would use the below function:
function sendInput ()
{
var personName = document.getElementById("people").value;
var eventType = document.getElementById("event").value;
var date = document.getElementById("date").value;
var guests = document.querySelectorAll(".guest");
var guestNames = [];
document.getElementById('output').innerHTML = "";
guests.forEach(function(el){
document.getElementById('output').innerHTML += "Dear " + el.value + " You have been invited to " + personName + "'s " + eventType + " on " + date + " Thank you for coming!!";
});
}
You try to get node by id var guestNames = document.getElementById("Guest").value
But all nodes have a different id, like a Guest0,Guest1 etc. I am trying to write my own code, but your snippet isn't full. I hope I helped you.
As far as I can see, when you try to fetch the guest name
var guestNames = document.getElementById("Guest").value
you won't get any element for two reasons because there's no element with id "Guest". In fact you generate them in the form "GuestN"
`input.id = "Guest" + i;`
You probably want to add a parameter i to sendInput () function, so that internally you can concatenate it to Guest as you did above and get the correct element with getElementById().
Your code is incomplete (as far as I can tell).
You do not specify the following elements anywhere:
'container', 'guest', 'people', 'event', 'data' or 'output'
I assume they should be defined somewhere in the HTML section (not provided)
To be able to create the variable displays, you need to define the 'container' you wish to initialize it before it is used in the for() loop that follows.
Example: var container = document.getElementById('container');
Within the loop, console.log(i.value) is invalid as i is not an element that has been assigne a value to display. It is a counter of the for() loop.
The function of sendInput(), I assume, is to collect the information from the user for each "Guest#" created by the first loop of your code. However you try to collect from "Guest" which has not been defined. For a number of 5, the collections should be for "Guest1", "Guest2", "Guest3", "Guest4", "Guest5". "Guest" only can not be found anywhere in your loop creation. Same goes for 'people, 'event' and 'date' which are referenced for value collection, but there are no elements named as such.
Not exactly sure why you are mixing DOM creation techniques (???).
You create the number of element for the guest, but then output the results with .innerHTML. You should use the DOM creation method, but I have used your code as you indicated you are a beginner.
Here is some (partially) corrected code that you can continue on with.
<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
</style>
</head><body>
<input type="text" value="5/28/2020" id="date">
<pre id='container'></pre>
<button id="report">Report</button>
<pre id='output'></pre>
<script>
console.clear();
function init() {
var number = 5;
var container = document.getElementById('container');
for (i=0;i<number;i++) {
var value = "Guest " + (i+1)+' ';
container.appendChild(document.createTextNode(value));
var input = document.createElement("input");
input.id = "Guest" + i;
input.value = value;
container.appendChild(input);
container.appendChild(document.createElement("br"));
console.log(i); // .value);
}
document.getElementById('report').addEventListener('click',sendInput);
} init();
function sendInput () {
var date = document.getElementById("date").value,
output = document.getElementById('output'),
info = '';
var guestNames = [...document.querySelectorAll('#container input')]; // alert(guestNames.length);
for (let i=0; i<guestNames.length; i++) {
info = `Dear ${guestNames[i].value}:\nYou have been invited to XXX's EVENT on ${date}\nThank you for coming!!\n\n`;
output.innerHTML += info;
}
// var guestNames = document.getElementById("Guest").value
// var personName = document.getElementById("people").value;
// var eventType = document.getElementById("event").value;
// var output = "Dear " + guestNames + " You have been invited to " + personName + "'s " + eventType + " on " + date + " Thank you for coming!!";
// output = `Dear ${guestNames}:\nYou have been invided to XXX's EVENT on ${date}\nThank you for coming!!`;
// document.getElementById('output').innerHTML = output.repeat(i);
}
</script>
</body></html>
I have this javascript function that generates new selects with IDs:
function generateChild(root, categories){
++counter;
var appendid = "id='selectCategory_".concat(counter);
var coma = "'";
var mayorque = "'>";
var appendcoma = appendid.concat(coma);
var select ="<div class='selectContainer'".concat(appendcoma);
var close = "><select ";
var cerrar = select.concat(close);
var appendidselect = cerrar.concat(appendid);
var html = appendidselect.concat(mayorque);
for (var i = 0; i < categories.length; i++) {
html += "<option value='" + categories[i] + "'>" + categories[i] + "</option>";
}
html += '</select></div>';
// ---------------------------
// ---------------------------
// create an element from the html string
// ---------------------------
var tplt = root.createElement('template');
tplt.innerHTML = html;
var el = tplt.content.firstChild;
// ---------------------------
// ---------------------------
// attach the change handler
// ---------------------------
el.firstChild.addEventListener("change", handle_onChange);
// ---------------------------
return el;
}
}
And then this function to search for the last dropdown that didn't have a blank space on it, and save it in a hidden input for later use:
if(this.value == ' '){
for (var i = counter - 1 ; i >= 0 ; --i){
var string = i.toString();
var selectid = "selectCategory_".concat(string);
if(document.getElementById(selectid)){
document.getElementById("category").value = document.getElementById(selectid).value;
break;
}
}
}
else{
var lastselectedvalue = this.value;
document.getElementById("category").value = this.value;
}
This works well with the first dropdown, which is already in the code:
<input type ="hidden" name="category" id = "category" value="">
<div id="category0" class="selectContainer">
<select id="selectCategory_0">
<option>something</option>
<option>something else</option>
</select>
</div>
But never works with the other dropdowns, it always returns undefined.
I'm making a a simple texteditor and for that I'm using a function which gets the selected text of a textarea.
My problem is not getting the selected text but when i add some tags to the selected text, for example bold or italic, it appends. So what I want is to delete the selection first before adding it to the textarea.
Here's my code:
<input type="button" id="bold" value="BOLD"/>
<input type="button" id="undo" value="UNDO"/>
<textarea id="message" cols="50" rows="20"></textarea>
var text = [];
var textarea = document.getElementById('message');
//simple texteditor
function edit(tag) {
var startPos = textarea.selectionStart;
var endPos = textarea.selectionEnd;
var selection = textarea.value.substring(startPos, endPos);
var surrounder = selection.replace(selection, "<" + tag + ">" + selection + "</" + tag + ">");
textarea.value += surrounder;
updatePreview();
textarea.focus();
}
document.getElementById('bold').onclick = function () {
edit('b');
};
document.getElementById('undo').onclick = function () {
document.execCommand('undo',false,null);
};
thanks in advance!
I think this works for you:
var text = [];
var textarea = document.getElementById('message');
//simple texteditor
function edit(tag) {
var startPos = textarea.selectionStart;
var endPos = textarea.selectionEnd;
console.log(startPos);
var selectionBefore = textarea.value.substring(0, startPos);
var selection = textarea.value.substring(startPos, endPos);
var selectionAfter = textarea.value.substring(endPos);
var surrounder = selection.replace(selection, "<" + tag + ">" + selection + "</" + tag + ">");
var newText = selectionBefore + surrounder + selectionAfter;
textarea.value = newText;
updatePreview();
textarea.focus();
}
document.getElementById('bold').onclick = function () {
edit('b');
};
document.getElementById('undo').onclick = function () {
document.execCommand('undo',false,null);
};
https://jsfiddle.net/3L659v65/
OK I am attempting to use onchange to capture the value from a dropbx but while I select the the value in the box it never seems to catch the onchange and I get an undefined value for the variable I try and capture the change with. I popped print statement into the onchange function call and it never seems to pick up the value switch. Any help is greatly appreciated
newWindow = window.open("", null, "height=400,width=800,status=yes,toolbar=no,menubar=no,location=no");
newWindow.document.title = "Crafting Window";
newWindow.document.body.style.background = "#00214D";
newWindow.document.body.style.color = "White";
// create a form and set properties
var form = document.createElement('form');
form.method = 'post';
// insert into the body of the new window
newWindow.document.body.appendChild(form);
// add text before the input
var cNumLab = document.createElement('cNumLab');
form.appendChild(document.createTextNode('Craft Number:'));
// add a text input
var cNum = document.createElement('input');
cNum.type = 'text';
cNum.name = 'input';
cNum.value = '';
form.appendChild(cNum);
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var sDescL = document.createElement('sDescL');
form.appendChild(document.createTextNode('Short Desc:'));
// add a text input
var sDesc = document.createElement('input');
sDesc.type = 'text';
sDesc.name = 'sDesc';
sDesc.value = '';
sDesc.size = 50;
form.appendChild(sDesc);
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var lDescL = document.createElement('lDesc');
form.appendChild(document.createTextNode('Long Desc:'));
// add a text input
var lDesc = document.createElement('input');
lDesc.type = 'text';
lDesc.name = 'lDesc';
lDesc.value = '';
lDesc.size = 80;
form.appendChild(lDesc);
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var eDescL = document.createElement('eDescL');
form.appendChild(document.createTextNode('Extended Desc:'));
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add a text input
var eDesc = document.createElement('textarea');
eDesc.type = 'text';
eDesc.name = 'eDesc';
eDesc.value = '';
form.appendChild(eDesc);
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var eTools = document.createElement('eTools');
form.appendChild(document.createTextNode('Tools:'));
// add a text input
var eTool = document.createElement('input');
eTool.type = 'text';
eTool.name = 'eTools';
eTool.value = '';
form.appendChild(eTool);
var tools = document.createElement('select');
tools.id = 'sTools';
tools.name = 'sTools';
form.appendChild(tools);
var cTool;
var e = document.getElementById("sTools");
var options = [
["Forge 33", "33"],
["Workbench 1391", "1391"],
["Oven 1753", "1753"],
["Mortar-Pestle 3277", "3277"],
["Chisel 3349", "3349"],
["Pottery Wheel 3420", "3420"],
["Kiln 3421", "3421"],
["Blowpipe3422", "3422"],
["Bookbinder 3467", "3467"],
["Palette 3483", "3483"]
];
for (var i = 0; i < options.length; i++) {
var opt = document.createElement('option');
opt.appendChild(document.createTextNode(options[i][0]));
opt.value = options[i][1];
tools.appendChild(opt);
}
tools.onchange = function () {
print("GOT HERE");
cTool = e.options[e.selectedIndex].value;
alert(cTool);
};
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var eIngreds = document.createElement('eIngreds');
form.appendChild(document.createTextNode('Ingredients:'));
// add a text input
var eIngred = document.createElement('input');
eIngred.type = 'text';
eIngred.name = 'eIngred';
eIngred.value = '';
eIngred.size = 50;
form.appendChild(eIngred);
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var eSteps1 = document.createElement('eSteps1');
form.appendChild(document.createTextNode('Step 1:'));
// add a text input
var eStep1 = document.createElement('input');
eStep1.type = 'text';
eStep1.name = 'eStep1';
eStep1.value = '';
eStep1.size = 80;
form.appendChild(eStep1);
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var eSteps1 = document.createElement('eSteps2');
form.appendChild(document.createTextNode('Step 2:'));
// add a text input
var eStep2 = document.createElement('input');
eStep2.type = 'text';
eStep2.name = 'eStep2';
eStep2.value = '';
eStep2.size = 80;
form.appendChild(eStep2);
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var eSteps3 = document.createElement('eSteps3');
form.appendChild(document.createTextNode('Step 3:'));
// add a text input
var eStep3 = document.createElement('input');
eStep3.type = 'text';
eStep3.name = 'eStep3';
eStep3.value = '';
eStep3.size = 80;
form.appendChild(eStep3);
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var eSteps4 = document.createElement('eSteps4');
form.appendChild(document.createTextNode('Step 4:'));
// add a text input
var eStep4 = document.createElement('input');
eStep4.type = 'text';
eStep4.name = 'eStep4';
eStep4.value = '';
eStep4.size = 80;
form.appendChild(eStep4);
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var eSteps5 = document.createElement('eSteps5');
form.appendChild(document.createTextNode('Step 5:'));
// add a text input
var eStep5 = document.createElement('input');
eStep5.type = 'text';
eStep5.name = 'eStep5';
eStep5.value = '';
eStep5.size = 80;
form.appendChild(eStep5);
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
// add text before the input
var eSteps6 = document.createElement('eSteps6');
form.appendChild(document.createTextNode('Step 6:'));
// add a text input
var eStep6 = document.createElement('input');
eStep6.type = 'text';
eStep6.name = 'eStep6';
eStep6.value = '';
eStep6.size = 80;
form.appendChild(eStep6);
var cTool;
var e = document.getElementById("sTools");
tools.onchange = function () {
cTool = e.options[e.selectedIndex].value;
alert(cTool);
};
//add linebreak
var linebreak = document.createElement('br');
form.appendChild(linebreak);
var eSubmit = document.createElement('button');
eSubmit.type = 'button';
//eSubmit.name = 'Submit Design';
eSubmit.innerHTML = 'Submit Design';
eSubmit.onclick = function () {
if (sDesc.value !== "") {
client.send_direct("craft edit " + cNum.value + " short_desc " + sDesc.value);
}
if (lDesc.value !== "") {
client.send_direct("craft edit " + cNum.value + " long_desc " + lDesc.value);
}
if (eDesc.value !== "") {
client.send_direct("craft edit " + cNum.value + " extended_desc " + eDesc.value);
}
if (eIngred.value !== "") {
client.send_direct("craft ingredients " + cNum.value + " " + eIngred.value);
}
if (eTool.value !== "") {
client.send_direct("craft tools " + cNum.value + " add " + eTool.value);
}
if (eStep1.value !== "") {
client.send_direct("craft steps " + cNum.value + " change 1 1 " + eStep1.value);
}
if (eStep2.value !== "") {
client.send_direct("craft steps " + cNum.value + " change 2 1 " + eStep2.value);
}
if (eStep3.value !== "") {
client.send_direct("craft steps " + cNum.value + " change 3 1 " + eStep3.value);
}
if (eStep4.value !== "") {
client.send_direct("craft steps " + cNum.value + " change 4 1 " + eStep4.value);
}
if (eStep5.value !== "") {
client.send_direct("craft steps " + cNum.value + " change 5 1 " + eStep5.value);
}
if (eStep6.value !== "") {
client.send_direct("craft steps " + cNum.value + " change 6 1 " + eStep6.value);
}
alert(cTool);
};
form.appendChild(eSubmit);
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.