Append array data to a html table column-wise using only javascript

Question

I have an set of array

Case =[case1, case2,case3]
Condition = [condition1,condition2,condition3]
Observation = [obs1,obs2,obs3]

How can I display this in a html table with the below format? Case condition and observation are headers which don't change. Basically the number of columns doesn't change only the rows change. How can I do this using javascript?

I am new to javascript and I am having difficulty in iteration.

+----------------------------------
| Case  | Condition  | Observation| 
+---------------------------------+
| case1 | condition1 | obs1       |
+---------------------------------+
| case2 | condition2 | obs2       | 
+---------------------------------+
| case3 | condition3 | obs3       | 
+---------------------------------+

Answer 1

Try following JS :

Case =["case1", "case2","case3"];
Condition = ["condition1","condition2","condition3"];
Observation = ["obs1","obs2","obs3"];

for(i=0;i<Case.length;i++)
{
    document.getElementById(tableid).innerHTML+="<tr><td>"+Case[i]+"</td><td>"+Condition[i]+"</td><td>"+Observation[i]+"</td></tr>"
}

Demo Fiddle