I have a HTML table that I created using Java Script on a JSP. The user can add,delete and modify the rows of the HTML table as he/she so desires.
The code for that works. But Now I want to save this table into a text/csv file on my/Server Desktop with a new button "Save Changes". Similarly, I also desire to load that text/csv file into the table with a button 'Load File' that would load the file and fill the HTML table with the data inside the file. So far, I'm unable to do this. The solutions that I have googled require Jquery or AJAX. I'm very new to Java Script so I can't really understand Jquery and AJAX and any other advanced methods. Is there a simple solution to save a HTML table to a txt/csv file on Server side using Java Script/Java (considering jsp can handle both). Also, is it possible to load the file into the HTML table with simple java/Java Script code.
I'm using JDK 8 on Eclipse Oxygen on windows 7 with tomcat 8 being my runtime environment.
Does somebody have an idea on how to do this. If you're interested in seeing the code for the JSP, it's provided.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@page import="java.io.FileReader"%>
<%@page import="java.io.BufferedReader"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="table_script.js"></script>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>EAN</th>
<th>DS_BRAND</th>
<th>DS_RANGE</th>
<th>DS_LIV_3</th>
<th>DS_LIV_1</th>
<th>DS_EAN</th>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<td><input type="text" id="new_age"></td>
<td><input type="text" id="new_dsliv3"></td>
<td><input type="text" id="new_dsliv1"></td>
<td><input type="text" id="new_dsean"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row">
</td>
</tr>
</table>
</div>
<script>
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 country=document.getElementById("country_row"+no);
var age=document.getElementById("age_row"+no);
var dsliv3=document.getElementById("dsliv3_row"+no);
var dsliv1=document.getElementById("dsliv1_row"+no);
var dsean=document.getElementById("dsean_row"+no);
var name_data=name.innerHTML;
var country_data=country.innerHTML;
var age_data=age.innerHTML;
var dsliv3_data=dsliv3.innerHTML;
var dsliv1_data=dsliv1.innerHTML;
var dsean_data=dsean.innerHTML;
name.innerHTML="<input type='text' id='name_text"+no+"'
value='"+name_data+"'>";
country.innerHTML="<input type='text' id='country_text"+no+"'
value='"+country_data+"'>";
age.innerHTML="<input type='text' id='age_text"+no+"'
value='"+age_data+"'>";
dsliv3.innerHTML="<input type='text' id='dsliv3_text"+no+"'
value='"+dsliv3_data+"'>";
dsliv1.innerHTML="<input type='text' id='dsliv1_text"+no+"'
value='"+dsliv1_data+"'>";
dsean.innerHTML="<input type='text' id='dsean_text"+no+"'
value='"+dsean_data+"'>";
}
function save_row(no)
{
var name_val=document.getElementById("name_text"+no).value;
var country_val=document.getElementById("country_text"+no).value;
var age_val=document.getElementById("age_text"+no).value;
var dsliv3_val=document.getElementById("dsliv3_text"+no).value;
var dsliv1_val=document.getElementById("dsliv1_text"+no).value;
var dsean_val=document.getElementById("dsean_text"+no).value;
document.getElementById("name_row"+no).innerHTML=name_val;
document.getElementById("country_row"+no).innerHTML=country_val;
document.getElementById("age_row"+no).innerHTML=age_val;
document.getElementById("dsliv3_row"+no).innerHTML=dsliv3_val;
document.getElementById("dsliv1_row"+no).innerHTML=dsliv1_val;
document.getElementById("dsean_row"+no).innerHTML=dsean_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_name=document.getElementById("new_name").value;
var new_country=document.getElementById("new_country").value;
var new_age=document.getElementById("new_age").value;
var new_dsliv3=document.getElementById("new_dsliv3").value;
var new_dsliv1=document.getElementById("new_dsliv1").value;
var new_dsean=document.getElementById("new_dsean").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='country_row"+table_len+"'>"+new_country+"</td><td
id='age_row"+table_len+"'>"+new_age+"</td><td
id='dsliv3_row"+table_len+"'>"+new_dsliv3+"</td><td
id='dsliv1_row"+table_len+"'>"+new_dsliv1+"</td><td
id='dsean_row"+table_len+"'>"+new_dsean+"</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="";
document.getElementById("new_country").value="";
document.getElementById("new_age").value="";
document.getElementById("new_dsliv3").value="";
document.getElementById("new_dsliv1").value="";
document.getElementById("new_dsean").value="";
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire