Develop Reference

Have Javascript (not JQuery) move table row (TR) up or down, not just the Cell (TD)

Have Javascript (not JQuery) move table row (TR) up or down, not just the block of TD Cells.
Add 2 Rows, then you notice that it just moves the cell down or up when you click the up or down button, but not the entire rows color. The information looks like it all gets moved.
I am using javascript only, so JQuery wont work.
Codepen of working code
https://codepen.io/soljohnston777/pen/zYBrMxL
var activeRow = 0;
function setActiveRow(el) {
var rows = document.getElementById('movingTable').rows;
for (var i = 1; i < rows.length; i++) {
if (rows[i] == el) activeRow = i;
}
}
function moveActiveRow(move) {
var rows = document.getElementById('movingTable').rows;
var oldRow = rows[activeRow].innerHTML;
var newRow = rows[activeRow + move].innerHTML;
rows[activeRow].innerHTML = newRow;
rows[activeRow + move].innerHTML = oldRow;
setActiveRow(rows[activeRow + move]);
}
function moveRow(cell, move) {
// alert("Row index is: " + cell.name);
setActiveRow(cell.parentNode);
moveActiveRow(move);
}
function doSubmit() {
var rows = document.getElementById('movingTable').rows;
var ret = new Array();
for (var i = 0; i < rows.length; i++) {
ret[ret.length] = rows[i].getElementsByTagName('td')[0].innerHTML;
}
return ret.join('|');
}
function AddSection() {
var txtName = document.getElementById("txtName");
AddRow(txtName.value, "1");
txtName.value = "";
};
function AddLesson() {
var txtName = document.getElementById("txtName");
AddRow(txtName.value, "2");
txtName.value = "";
};
function AddRow(name, section) {
var table = document.getElementById("movingTable");
// 1 section , 2 lesson
if (section == "1") {
var row = table.insertRow(-1);
var input1 = document.createElement('input');
input1.type = "hidden";
var input2 = document.createElement('input');
input2.type = "text";
input2.setAttribute("value", name);
input2.setAttribute("name", "section[]");
input2.setAttribute("style", "background-color: #5cffde;");
var inputhidden1 = document.createElement('input');
inputhidden1.type = "hidden";
inputhidden1.setAttribute("name", "section[]");
var inputhidden2 = document.createElement('input');
inputhidden2.type = "hidden";
var input3 = document.createElement('input');
input3.type = "button";
input3.value = "Up";
input3.setAttribute("onclick", "moveRow(this, -1);");
var input4 = document.createElement('input');
input4.type = "button";
input4.value = "Down";
input4.setAttribute("onclick", "moveRow(this, 1);");
var input5 = document.createElement('input');
input5.type = "button";
input5.value = "Remove";
input5.setAttribute("onclick", "Remove(this);");
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var cell3 = row.insertCell(-1);
var cell4 = row.insertCell(-1);
var cell5 = row.insertCell(-1);
cell1.appendChild(input1);
cell2.appendChild(input2);
cell2.appendChild(inputhidden1);
cell2.appendChild(inputhidden2);
cell3.appendChild(input3);
cell4.appendChild(input4);
cell5.appendChild(input5);
inputhidden1 = "";
inputhidden2 = "";
}
if (section == "2") {
var row = table.insertRow(-1);
var input1 = document.createElement('input');
input1.type = "hidden";
var input2 = document.createElement('input');
input2.type = "text";
input2.setAttribute("value", name);
input2.setAttribute("name", "Lesson[]");
var input3 = document.createElement('input');
input3.type = "button";
input3.value = "Up";
input3.setAttribute("onclick", "moveRow(this, -1);");
var input4 = document.createElement('input');
input4.type = "button";
input4.value = "Down";
input4.setAttribute("onclick", "moveRow(this, 1);");
var input5 = document.createElement('input');
input5.type = "button";
input5.value = "Remove";
input5.setAttribute("onclick", "Remove(this);");
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var cell3 = row.insertCell(-1);
var cell4 = row.insertCell(-1);
var cell5 = row.insertCell(-1);
cell1.appendChild(input1);
cell2.appendChild(input2);
cell3.appendChild(input3);
cell4.appendChild(input4);
cell5.appendChild(input5);
}
var colors = new Array('#ffffff', '#dddddd', '#aaaaaa', '#888888');
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
doMultiple(rows[i], i, rows[i].className);
}
function doMultiple(row, i, s) {
if (section == "1" || s == "sections") {
row.className = "sections";
} else {
row.style.backgroundColor = colors[i % colors.length];
}
}
}
function Remove(button) {
//Determine the reference of the Row using the Button.
var row = button.parentNode.parentNode;
var name = row.getElementsByTagName("TD")[0].innerHTML;
if (confirm("Do you want to delete this?")) {
//Get the reference of the Table.
var table = document.getElementById("movingTable");
//Delete the Table row using it's Index.
table.deleteRow(row.rowIndex);
}
};
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table td {
border: solid 1px #e7e7e7;
width: 100px;
word-wrap: break-word;
}
.sections {
background-color: #5cffde;
}
<table border="1" cellspacing="0" cellpadding="0" id="mTable">
<thead>
<tr>
<td>Section?</td>
<td>Section/Lesson Name</td>
<td>Move Up</td>
<td>Move Down</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table border="1" cellspacing="0" cellpadding="0" id="movingTable">
</table>
<table width="100" border="1" cellspacing="0" cellpadding="0" id="">
<tfoot>
<td></td>
<td><input type="text" id="txtName" /></td>
<td></td>
<td><input type="button" onclick="AddSection()" value="Add Section" /></td>
<td><input type="button" onclick="AddLesson()" value="Add Lesson" /></td>
</tfoot>
</table>

Unable to generate table after clearing table

I'm working on a project but am stuck on the fact that I'm unable to generate a new table after resetting the previous table.
What I would like to do is to let a user reset the table using the button and then generate another one if needed, and not needing him to reload the page. However, I am unsure why my codes only allow me to reset the table but am unable to generate another table.
Any help on this would be greatly appreciated.
function generate() {
var myTable = document.getElementById("generatedTable");
var table = document.createElement('TABLE');
table.border = '1';
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var rows = document.getElementById("rows").value;
var cols = document.getElementById("cols").value;
for (var y = 0; y < rows; y++) {
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (var x = 0; x < cols; x++) {
var td = document.createElement('TD');
td.width = 10;
td.height = 10;
var cellID = "cell [" + x + ", " + y + "]";
td.setAttribute("id", cellID.toString());
td.addEventListener("click", function() {
cellClicked(this);
});
td.appendChild(document.createTextNode("Cell " + x + "," + y));
tr.appendChild(td);
}
myTable.appendChild(table);
}
//document.getElementById("button").disabled = true;
}
function cellClicked(cell) {
//var cell = document.getElementById("this");
cell.style.backgroundColor = "yellow";
}
function mouseOver(cell) {
var cell = document.getElementById("td");
cell.style.backgroundColor = "red";
}
function mouseOut(cell) {
var cell = document.getElementById("generatedTable");
cell.style.backgroundColor = "";
}
function removeTable() {
var removeTab = document.getElementById('generatedTable');
var parentElement = removeTab.parentElement;
parentElement.removeChild(removeTab);
}
No. of Rows <input type="text" name="rows" id="rows">
<br>
<br> No. of Cols <input type="text" name="cols" id="cols">
<br>
<button onclick="generate()" type="button" id="button">Generate</button>
<button onclick="removeTable()" type="reset" value="reset">RESET TABLE</button>
<table id="generatedTable" onmouseover="mouseOver()" onmouseout="mouseOut()"></table>

You were using the id "generatedTable" in a confusing way, at the same time for the newly generated table and for the table you already had in your html file. And at the end you were removing the wrapper table instead of the newly generated one.
It is maybe easier to understand if you use a target element and add the table in it:
const wrapper = document.getElementById('table-wrapper');
function generate() {
var table = document.createElement('TABLE');
table.id = 'generatedTable';
table.border = '1';
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
var rows = document.getElementById("rows").value;
var cols = document.getElementById("cols").value;
for (var y = 0; y < rows; y++) {
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (var x = 0; x < cols; x++) {
var td = document.createElement('TD');
td.width = 10;
td.height = 10;
var cellID = "cell [" + x + ", " + y + "]";
td.setAttribute("id", cellID.toString());
td.addEventListener("click", function() {
cellClicked(this);
});
td.appendChild(document.createTextNode("Cell " + x + "," + y));
tr.appendChild(td);
}
wrapper.appendChild(table);
}
//document.getElementById("button").disabled = true;
}
function cellClicked(cell) {
//var cell = document.getElementById("this");
cell.style.backgroundColor = "yellow";
}
function mouseOver(cell) {
var cell = document.getElementById("td");
cell.style.backgroundColor = "red";
}
function mouseOut(cell) {
var cell = document.getElementById("generatedTable");
cell.style.backgroundColor = "";
}
function removeTable() {
var removeTab = document.getElementById('generatedTable');
wrapper.removeChild(removeTab);
}
No. of Rows <input type="text" name="rows" id="rows">
<br>
<br> No. of Cols <input type="text" name="cols" id="cols">
<br>
<button onclick="generate()" type="button" id="button">Generate</button>
<button onclick="removeTable()" type="reset" value="reset">RESET TABLE</button>
<div id="table-wrapper"></div>

Display the existing json data to matrix like table

I would like to display the json data to the table. Tried key value pattern. But no luck. Could anyone suggest me? Thanks.
my full JSON data contains around 20 objects. This is a dynamic created table according to other table's value -- example has 3. So when it's three rows, only three rows should be filled from the JSON data if exists. For example if 5 rows, 3 rows should be filled from the json and two rows should display '-'.
function setTrait_matrix() {
var json_data = {
Title1_Title1: "11yty",
Title1_Title2: "12sdf",
Title1_Title3: "1376",
Title2_Title1: "21yu",
Title2_Title2: "22",
Title2_Title3: "235",
Title3_Title1: "31",
Title3_Title2: "32",
Title3_Title3: "33"
};
var matrixVal = 3;
if (matrixVal != 0 || matrixVal != null) {
var root = document.getElementById("traits_matrix_Div");
var table = document.createElement('table');
table.className = "difftable";
var tblB = document.createElement('tbody');
table.appendChild(tblB);
var firstList = {};
for (var x = 1; x <= matrixVal; x++) {
firstList['Title' + x] = 'Title' + x;
}
myData = Object.values(firstList);
var tr = document.createElement('tr');
tr.appendChild(document.createElement('th'));
for (var j = 0; j < matrixVal; j++) {
var th = document.createElement('th');
var text = document.createTextNode(myData[j]);
th.appendChild(text);
tr.appendChild(th);
}
tblB.appendChild(tr);
for (var i = 0; i < matrixVal; i++) {
var tr = document.createElement('tr');
tblB.appendChild(tr);
var td = document.createElement('td');
var text = document.createTextNode(myData[i]);
td.appendChild(text);
tr.appendChild(td);
var thisMatrix = JSON.stringify(json_data);
var curcolumn = i + 1;
for (var j = 0; j < matrixVal; j++) {
var input = document.createElement("input");
input.type = "text";
if (typeof thisMatrix !== 'undefined') {
var curValue = "jsonVal";
} else {
var curValue = "-"
}
var col = j + 1;
if (i >= 0 && j >= 0) {
input.name = "Title" + curcolumn + "_Title" + col;
input.value = curValue;
input.id = "Title" + curcolumn + "_Title" + col;
}
const td = document.createElement('td');
td.appendChild(input);
tr.appendChild(td);
}
}
root.appendChild(table);
}
}
<body onload="setTrait_matrix()">
<div id="traits_matrix_Div" style="visibility:visible" style="border: 1px; height:200px; align: center;"></div>
</body>
Hope I am not confusing. Please suggest me!

function setTrait_matrix() {
var json_data = {
Title1_Title1: "11yty",
Title1_Title2: "12sdf",
Title1_Title3: "1376",
Title2_Title1: "21yu",
Title2_Title2: "22",
Title2_Title3: "235",
Title3_Title1: "31",
Title3_Title2: "32",
Title3_Title3: "33"
};
var matrixVal = 3;
if (matrixVal != 0 || matrixVal != null) {
var root = document.getElementById("traits_matrix_Div");
var table = document.createElement('table');
table.className = "difftable";
var tblB = document.createElement('tbody');
table.appendChild(tblB);
var firstList = {};
for (var x = 1; x <= matrixVal; x++) {
firstList['Title' + x] = 'Title' + x;
}
myData = Object.values(firstList);
var tr = document.createElement('tr');
tr.appendChild(document.createElement('th'));
for (var j = 0; j < matrixVal; j++) {
var th = document.createElement('th');
var text = document.createTextNode(myData[j]);
th.appendChild(text);
tr.appendChild(th);
}
tblB.appendChild(tr);
for (var i = 0; i < matrixVal; i++) {
var tr = document.createElement('tr');
tblB.appendChild(tr);
var td = document.createElement('td');
var text = document.createTextNode(myData[i]);
td.appendChild(text);
tr.appendChild(td);
var thisMatrix = JSON.stringify(json_data);
var curcolumn = i + 1;
for (var j = 0; j < matrixVal; j++) {
var input = document.createElement("input");
input.type = "text";
if (typeof json_data["Title"+(i+1)+"_Title"+(j+1)] !== 'undefined') {
var curValue = json_data["Title"+(i+1)+"_Title"+(j+1)];
} else {
var curValue = "-"
}
var col = j + 1;
if (i >= 0 && j >= 0) {
input.name = "Title" + curcolumn + "_Title" + col;
input.value = curValue;
input.id = "Title" + curcolumn + "_Title" + col;
}
const td = document.createElement('td');
td.appendChild(input);
tr.appendChild(td);
}
}
root.appendChild(table);
}
}
<body onload="setTrait_matrix()">
<div id="traits_matrix_Div" style="visibility:visible" style="border: 1px; height:200px; align: center;"></div>
</body>
I hope this will help you.

I just did a quick fix in your code. You weren't actually calling the JSON object data anywhere, so... I just called it like this:
let box_value = json_data["Title" + curcolumn + "_Title" + col];
input.value = box_value?box_value:"-";
function setTrait_matrix() {
var json_data = {
Title1_Title1: "11yty",
Title1_Title2: "12sdf",
Title1_Title3: "1376",
Title2_Title1: "21yu",
Title2_Title2: "22",
Title2_Title3: "235",
Title3_Title1: "31",
Title3_Title2: "32",
Title3_Title3: "33",
Title1_Title4: "1414141"
};
var matrixVal = 5;
if (matrixVal != 0 || matrixVal != null) {
var root = document.getElementById("traits_matrix_Div");
var table = document.createElement('table');
table.className = "difftable";
var tblB = document.createElement('tbody');
table.appendChild(tblB);
var firstList = {};
for (var x = 1; x <= matrixVal; x++) {
firstList['Title' + x] = 'Title' + x;
}
myData = Object.values(firstList);
var tr = document.createElement('tr');
tr.appendChild(document.createElement('th'));
for (var j = 0; j < matrixVal; j++) {
var th = document.createElement('th');
var text = document.createTextNode(myData[j]);
th.appendChild(text);
tr.appendChild(th);
}
tblB.appendChild(tr);
for (var i = 0; i < matrixVal; i++) {
var tr = document.createElement('tr');
tblB.appendChild(tr);
var td = document.createElement('td');
var text = document.createTextNode(myData[i]);
td.appendChild(text);
tr.appendChild(td);
var thisMatrix = JSON.stringify(json_data);
var curcolumn = i + 1;
for (var j = 0; j < matrixVal; j++) {
var input = document.createElement("input");
input.type = "text";
if (typeof thisMatrix !== 'undefined') {
var curValue = "jsonVal";
} else {
var curValue = "-"
}
var col = j + 1;
if (i >= 0 && j >= 0) {
input.name = "Title" + curcolumn + "_Title" + col;
let box_value = json_data["Title" + curcolumn + "_Title" + col];
input.value = box_value?box_value:"-";
input.id = "Title" + curcolumn + "_Title" + col;
}
const td = document.createElement('td');
td.appendChild(input);
tr.appendChild(td);
}
}
root.appendChild(table);
}
}
<body onload="setTrait_matrix()">
<div id="traits_matrix_Div" style="visibility:visible" style="border: 1px; height:200px; align: center;"></div>
</body>

How can i insert a label text in a table cell

I have a table which i am dynamically generating based on user input. I am trying to insert a label text into table cell on button click. onclick of button a label text of a demo method should be inserted into table cells. Can someone suggest me how can i do this?
Thanks.
Creating Table:
function CreateTable(){
var rowCtr;
var cellCtr;
var rowCnt;
var cellCnt;
var myTableDiv = document.getElementById('myDynamicTable');
var table = document.createElement('table');
table.setAttribute("contenteditable", "true");
table.border = "1";
table.id = "myTable";
var tableBody = document.createElement('tbody');
table.appendChild(tableBody);
rowCnt = document.getElementById('txtrows').value;
cellCnt = document.getElementById('txtcols').value;
for (rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
var tr = document.createElement('tr');
tableBody.appendChild(tr);
for (cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
var td = document.createElement('td');
td.width = '120';
td.appendChild(document.createTextNode("Row:" + rowCtr + " Column:" + cellCtr));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
}
Button:
<asp:Button ID="button1" Text="button" runat="server" OnClick="demo" />
C# code:
public void demo()
{
TableCell tcell = new TableCell();
RadLabel rlbl = new RadLabel();
rlbl.Text = "test";
tcell.Controls.Add(rlbl);
}
protected void demo(object sender, EventArgs e)
{
demo();
}

To give you a start using Javascript, you can use below code as a starting point.
window.onload=function(){
CreateTable();
}
function CreateTable(){
var rowCtr;
var cellCtr;
var rowCnt;
var cellCnt;
var myTableDiv = document.getElementById('myDynamicTable');
var table = document.createElement('table');
table.setAttribute("contenteditable", "true");
table.border = "1";
table.id = "myTable";
var tableBody = document.createElement('tbody');
table.appendChild(tableBody);
rowCnt = 3; //document.getElementById('txtrows').value;
cellCnt =2; //document.getElementById('txtcols').value;
for (rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
var tr = document.createElement('tr');
tableBody.appendChild(tr);
for (cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
var td = document.createElement('td');
td.width = '120';
td.appendChild(document.createTextNode("Row:" + rowCtr + " Column:" + cellCtr));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
}
function demo(){
var myTable=document.getElementById('myTable');
var cell=myTable.rows[0].cells[1];
var label = document.createElement('label');
label.id="lbl-"+cell.cellIndex;
label.innerText="This is label text";
cell.appendChild(label);
}
<input type="button" onclick="demo()" value="Create Label" />
<div id="myDynamicTable"></div>

Dynamically created table only displays last appended table data

I am working with Javascript where I've got a drop down list derived from an array (List of stream names) and whenever this array selection changes (onchange()) the details of the array( attributes and types) should be derived from two arrays (two 1d arrays- attributes, type) and displayed in a table form below the dropdown. I've written the function that displays the table within a division but it retrieves only the last data pair and appends it to the table. But I need all the data from the arrays to be displayed in each column so that they look as if they correspond each other.
JS Function to create the main array:
//Generate array to hold predefined Stream Definitions
function PredefinedStreams() {
var StreamArray = new Array(3);
for (var q = 0; q < 3; q++)
{
StreamArray[q] = new Array(4);
for (var w=1; w<3; w++)
{
StreamArray[q][w] = new Array(5);
}
}
StreamArray[0][0]="Stream1";
StreamArray[0][1][0]="1_attr1";
StreamArray[0][1][1]="1_attr2";
StreamArray[0][1][2]="1_attr3";
StreamArray[0][1][3]="1_attr4";
StreamArray[0][1][4]="1_attr5";
StreamArray[0][2][0]="1_type1";
StreamArray[0][2][1]="1_type2";
StreamArray[0][2][2]="1_type3";
StreamArray[0][2][3]="1_type4";
StreamArray[0][2][4]="1_type5";
StreamArray[0][3] = "define stream Stream1 (1_attr1 1_type1, 1_attr2 1_type2, 1_attr3 1_type3, 1_attr4 1_type4, 1_attr5 1_type5 );";
StreamArray[1][0]="Stream2";
StreamArray[1][1][0]="2_attr1";
StreamArray[1][1][1]="2_attr2";
StreamArray[1][1][2]="2_attr3";
StreamArray[1][1][3]="2_attr4";
StreamArray[1][1][4]="2_attr5";
StreamArray[1][2][0]="2_type1";
StreamArray[1][2][1]="2_type2";
StreamArray[1][2][2]="2_type3";
StreamArray[1][2][3]="2_type4";
StreamArray[1][2][4]="2_type5";
StreamArray[1][3] = "define stream Stream2 (2_attr1 2_type1, 2_attr2 2_type2, 2_attr3 2_type3, 2_attr4 2_type4, 2_attr5 2_type5 );";
StreamArray[2][0]="Stream3";
StreamArray[2][1][0]="3_attr1";
StreamArray[2][1][1]="3_attr2";
StreamArray[2][1][2]="3_attr3";
StreamArray[2][1][3]="3_attr4";
StreamArray[2][1][4]="3_attr5";
StreamArray[2][2][0]="3_type1";
StreamArray[2][2][1]="3_type2";
StreamArray[2][2][2]="3_type3";
StreamArray[2][2][3]="3_type4";
StreamArray[2][2][4]="3_type5";
StreamArray[2][3] = "define stream Stream3 (3_attr1 3_type1, 3_attr2 3_type2, 3_attr3 3_type3, 3_attr4 3_type4, 3_attr5 3_type5 );";
return StreamArray;
}
JS Function to retrieve individual stream data onto arrays:
var streams = '<select id="streamSelect" onchange="showStreamDef()">', streamtypes = PredefinedStreams();
var streamDef = streamtypes = PredefinedStreams();
var stream1_attr = streamtypes = PredefinedStreams();
var stream1_type = streamtypes = PredefinedStreams();
var stream2_attr = streamtypes = PredefinedStreams();
var stream2_type = streamtypes = PredefinedStreams();
var stream3_attr = streamtypes = PredefinedStreams();
var stream3_type = streamtypes = PredefinedStreams();
var PredefinedStreamComboDiv=document.createElement('div');
function createattr()
{
for (var q = 0; q < 3; q++)
{
streams += "<option value='"+streamtypes[q][0]+"'>"+streamtypes[q][0]+"</option>";
streamDef += streamtypes[q][3];
for (var w=0; w<3; w++)
{
for(var r=0; r<5;r++)
{
if(q==0 && w==1)
{
stream1_attr[r] = streamtypes[q][w][r];
}
if(q==0 && w==2)
{
stream1_type[r] = streamtypes[q][w][r];
}
if(q==1 && w==1)
{
stream2_attr[r]= streamtypes[q][w][r];
}
if(q==1 && w==2)
{
stream2_type [r]= streamtypes[q][w][r];
}
if(q==2 && w==1)
{
stream3_attr [r]= streamtypes[q][w][r];
}
if(q==2 && w==2)
{
stream3_type [r]= streamtypes[q][w][r];
}
}
}
}
streams += '</select>';
//streamDef += '</select>';
PredefinedStreamComboDiv.className="attr-combobox-style";
PredefinedStreamComboDiv.innerHTML= streams;
PredefinedStream.appendChild(PredefinedStreamComboDiv);
}
JS Function to create the table:
function showStreamDef()
{
alert("Displaying Stream Details");
var choice=document.getElementById("streamSelect");
var selectedStr = choice.options[choice.selectedIndex].text;
var myTableDiv = document.getElementById("streamDefDiv");
var table = document.createElement('TABLE');
var tableBody = document.createElement('TBODY');
table.border = '1';
table.appendChild(tableBody);
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode("Attribute"));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode("Type"));
tr.appendChild(td);
if(selectedStr=="Stream1")
{
for (var d = 0; d < stream1_attr.length; d++)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream1_attr[d]));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream1_type[d]));
tr.appendChild(td);
}
}
else if(selectedStr=="Stream2")
{
for (var d = 0; d < stream1_attr.length; d++)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream2_attr[d]));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream2_type[d]));
tr.appendChild(td);
}
}
else
{
for (var d = 0; d < stream1_attr.length; d++)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream3_attr[d]));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream3_type[d]));
tr.appendChild(td);
}
}
tableBody.appendChild(tr);
myTableDiv.appendChild(table);
document.getElementById('streamDefDiv').style.display = "block";
}

The issue was only with the function where I dynamically generate the table.
As shown in the question, I've appended the row(tr) to the tablebody only at the end. This causes only the last saved data pair row to be appended to the table. So in order to get each row to be appended: once each table data(td) is appended to a row( tr), that particular tr needs to be appended to the tablebody.
function showStreamDef()
{
var choice=document.getElementById("streamSelect");
var selectedStr = choice.options[choice.selectedIndex].text;
var myTableDiv = document.getElementById("streamDefDiv");
var table = document.createElement('TABLE');
var tableBody = document.createElement('TBODY');
table.border = '1';
table.appendChild(tableBody);
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode("Attribute"));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode("Type"));
tr.appendChild(td);
tableBody.appendChild(tr);
if(selectedStr=="Stream1")
{
for (var d = 0; d < stream1_attr.length; d++)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream1_attr[d]));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream1_type[d]));
tr.appendChild(td);
tableBody.appendChild(tr);
}
}
else if(selectedStr=="Stream2")
{
for (var d = 0; d < stream1_attr.length; d++)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream2_attr[d]));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream2_type[d]));
tr.appendChild(td);
tableBody.appendChild(tr);
}
}
else
{
for (var d = 0; d < stream1_attr.length; d++)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream3_attr[d]));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream3_type[d]));
tr.appendChild(td);
tableBody.appendChild(tr);
}
}
myTableDiv.appendChild(table);
document.getElementById('streamDefDiv').style.display = "block";
}