I'm building a web application using HTML, Java, and Javascript. Is it possible to style a button and a table with Bootstrap that I've inserted into my Javascript code?
What I have in mind is that I need to upload a CSV file from my PC, and once I've selected it I click on Upload (a button which I inserted), where a table will be generated on the same JSP page.
After which, the table should have two additional columns, 'Edit' and 'Delete', to edit and delete rows respectively. I've already added the Edit button (see in code below).
Afterwards, I want to generate a Submit button at the bottom of the table to upload this table into my database.
Here's the problem.
1) Right now my Upload button has onclick="Upload();" so when i click on the Upload button it brings me to the javascript function.
<div>
<label for="fileUpload"></label>
<input type="file" id="fileUpload"/>
<button type="button" id="upload" class="btn btn-info" onclick="Upload();"
}>Upload
</button>
<div id="dvCSV">
</div>
</div>
This is my Upload function:
<script type="text/javascript">
function Upload() {
var table = null;
var fileUpload = document.getElementById("fileUpload");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
table = document.createElement("table");
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var row = table.insertRow(-1);
var x = row.insertCell(0);
if (i == 0) {
x.innerHTML = "Edit?";
} else {
var btn = document.createElement("button");
btn.innerHTML = "Edit";
btn.className = "editbtn";
x.appendChild(btn);
btn.onclick = function () {
var currentTD = $(this).parents('tr').find('td');
if ($(this).html() == 'Edit') {
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
} else {
$.each(currentTD, function () {
$(this).prop('contenteditable', false)
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
}
}
var cells = rows[i].split(",");
for (var j = 0; j < cells.length; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
}
}
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
}
reader.readAsText(fileUpload.files[0]);
//print("THIS");
} else {
alert("This browser does not support HTML5.");
}
//this button is to appear AFTER the table has generated
var button = document.createElement('button');
var t = document.createTextNode("Submit");
button.appendChild(t);
button.onClick = Upload;
document.body.appendChild(button);
button.style = "float:right";
} else {
alert("Please upload a valid CSV file.");
}
}
</script>
My question is, is there a better way to do what I want to do? I'm not allowed to use PHP. If not, is there a way to style the table and button that were created in my javascript function?
2) How do I insert this table into a Database? I'm using Tomcat and MySQL.
Any help is greatly appreciated, thanks!