How to access dynamic table rows and concatinate them in textarea?

**Claus Mygind** · Dec 29 '14, 02:35 PM

To access a dynamic row or table cell, give each node <td> a unique id like this.

Code:

function addRow()
{
  // when adding a row get the new length of the table
  var x = document.getElementById("myTable").rows.length;
  // then add that row number to the id of the row

}

Another method that does not require a unique id would be to walk the document tree nodes, filter out the nodes you want to get information from while skipping the rest. This could be done by setting the root node to your table, then stopping at every <td> node or if only specific <td> nodes you can give them a similar 'name' like <td name='getInfoHe re">. It's not hard to do but it take a little to wrap your head around the code to see what is happening. At this point of course I'm still guessing at what you are trying to do.

Code:

function getLikeElements(tagName, attrName, attrValue) {
    var startSet;
    var endSet = new Array();
    if (tagName) {
        startSet = document.getElementsByTagName(tagName);    
    } else {
        startSet = (document.all) ? document.all : document.getElementsByTagName("*");
    }
    if (attrName) {
        for (var i = 0; i < startSet.length; i++) {
            if (startSet[i].getAttribute(attrName)) {
                if (attrValue) {
                    if (startSet[i].getAttribute(attrName) == attrValue) {
                        endSet[endSet.length] = startSet[i];
                    }
                } else {
                    endSet[endSet.length] = startSet[i];
                }
            }
        }
    } else {
        endSet = startSet;
    }
    return endSet;
}

----------

function walkChildNodes(objRef, n) {
    var obj;
    if (objRef) {
        if (typeof objRef == "string") {
            obj = document.getElementById(objRef);
        } else {
            obj = objRef;
        }
    } else {
        obj = (document.body.parentElement) ? 
            document.body.parentElement : document.body.parentNode;
    }
    var output = "";
    var indent = "";
    var i, group, txt;
    if (n) {
        for (i = 0; i < n; i++) {
            indent += "+---";
        }
    } else {
        n = 0;
        output += "Child Nodes of <" + obj.tagName .toLowerCase();
        output += ">\n=====================\n";
    }
    group = obj.childNodes;
    for (i = 0; i < group.length; i++) {
        output += indent;
        switch (group[i].nodeType) {
            case 1:
                output += "<" + group[i].tagName.toLowerCase();
                output += (group[i].id) ? " ID=" + group[i].id : "";
                output += (group[i].name) ? " NAME=" + group[i].name : "";
                output += ">\n";
                break;
            case 3:
                txt = group[i].nodeValue.substr(0,15);
                output += "[Text:\"" + txt.replace(/[\r\n]/g,"<cr>");
                if (group[i].nodeValue.length > 15) {
                    output += "...";
                }
                output += "\"]\n";
                break;
            case 8:
                output += "[!COMMENT!]\n";
                break;
            default:
                output += "[Node Type = " + group[i].nodeType + "]\n";
        }
        if (group[i].childNodes.length > 0) {
            output += walkChildNodes(group[i], n+1);
        }
    }
    return output;
}

----------

function authorAttrFilter(node) {
    if (node.hasAttribute("author")) {
        return NodeFilter.FILTER_ACCEPT;        
    }
    return NodeFilter.FILTER_SKIP;
}

var authorsOnly = document.createTreeWalker(document, NodeFilter.SHOW_ELEMENT, 
                  authorAttrFilter, false);

From the information you provided your question cannot be answered. You did not include your javaScript functions.
1. myFunction()
2. generateEOS()

That being said, formatting your code will make it easier for you to debug it. For example look at your code below where I have formatted it for you. Note the bold item
<tr>around your table header tags <th>. They were missing in your code. Easy to spot when the code is formatted. This would mess things up when you add a row to the table. <TH> is like a <TD> and must be encapsulated in a <TR> </TR> tag.

So where is your code where you concatenate your text in the text area?

Code:


    <!DOCTYPE html> 
	<html> 
		<head> 
			<style>
			    table, td {border: 1px solid black;}
			</style> 
		</head> 
		<body> 
			<p>Click the button to add a new row at the first position of the table and then add cells and content.</p> <table id="myTable">
				[B][U][I]<tr>[/I][/U][/B]
					<th> Owner </th> 
					<th> Receiver</th> 
					<th> agreement</th> 
					<th> Access</th> 
					<th> Permissions</th> 
				[B][I][U]</tr>[/U][/I][/B]
				<tr> 
					<td>
						<input type="text" id="Owner"  onkeyup="generateEOS()"/>
					</td><td>
						<input type="text" id="Receiver" onkeyup="generateEOS()"  />
					</td><td>
						<input type="text" id="Options"   onkeyup="generateEOS()" />
					</td><td>
						<select onchange="ChooseContact(this)"> 
							<Option>Access</Option> 
							<option>R</option> 
							<option>W</option> 
							<option>B</option> 
							<option>N</option> 
						</select>
					</td><td>
						<input type="text" id="Access" onkeyup="generateEOS()" />
					</td> 
				</tr> 
			</table> 
			<br> 
			<div align="Center"> 
				<button onclick="myFunction()">Add new row</button> 
				<textarea id="preview" rows="20" cols="70">

How to access dynamic table rows and concatinate them in textarea?

How to access dynamic table rows and concatinate them in textarea?

Comment