table2

by bvotcode

HTML

<html>
<head>

</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Level</th>
<th>Action</th>
</tr>

<tr>
<td><input type="text" id="new_name"></td>
<td>
    <select name="levels-list" id="levels-list">
    <option value="A" id="option-1">A</option>
    <option value="B" id="option-2">B</option>
    <option value="C" id="option-3">C</option>
    </select> 
</td>
<td><input type="button" class="add" value="Add Row" id="add-button"></td>
</tr>

</table>
</div>
<script type="text/javascript" src="get-text.js"></script>
</body>
</html>

JavaScript

var myArray = [{"name":"aaa","level":"A"},{"name":"bbb","level":"B"},{"name":"ccc","level":"C"}];
var addButton=document.getElementById("add-button"); 

//listen to add button. If clicked, store the entered data and append them in the display
addButton.addEventListener('click', add_row, false);

function add_row(){
 event.preventDefault();
 var new_name=document.getElementById("new_name").value;
 var new_level=document.getElementById("levels-list").value;

 var table=document.getElementById("data_table");
 var table_len=(table.rows.length)-1;

 var row = table.insertRow(table_len).outerHTML=
 "<tr id= 'row"+table_len+"'>\
    <td id='name_row"+table_len+"'>"+new_name+"</td>\
    <td id='level_row"+table_len+"'>"+new_level+"</td>\
    <td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> \
        <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> \
        <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'>\
    </td>\
 </tr>";

 document.getElementById("new_name").value="";
}

function edit_row(no)
{
 document.getElementById("edit_button"+no).style.display="none";
 document.getElementById("save_button"+no).style.display="block";

 var name=document.getElementById("name_row"+no);
 var level=document.getElementById("level_row"+no);

 var name_data=name.innerHTML;
 var level_data=level.innerHTML;

 name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
 level.innerHTML='<select id="levels-list'+no+'">\
                    <option value="A" id="option-1">A</option>\
                    <option value="B" id="option-2">B</option>\
                    <option value="C" id="option-3">C</option>\
                    </select>' ;

document.getElementById("levels-list"+no).value = level_data;        

}//end