lotabout/score.html

## score.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

<style>
#table_score {
    border-collapse: collapse;
    padding: 12px;
}

#table_score th, #table_score td {
    border: 1px solid #333;
    border: 1px solid #98bf21;
    padding: 3px 7px 2px 7px;
}

#table_score th{
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #A7C942;
    color: #ffffff;
}

#table_score tr:nth-child(odd) td {
    color: #000000;
    background-color: #EAF2D3;
}

.usage , .modify, .save-load {
    border: 1px solid #EFEFEF;
    margin: 5px;
}

.table {
    margin: 10px;
}
</style>

<script>

// trigger btn_modify when Enter key is pressed.
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btn_modify').click();
    }
}

function remove_row() {
    var student_id = parseInt(document.getElementById("student_id").value);
    var table_score = document.getElementById("table_score");

    remove_entry(table_score, student_id);

    document.getElementById('student_id').focus();
    clear_input_data();
}

function remove_entry(table, student_id) {
    for (i=1; i<table.rows.length; i++) {
        var cells = table_score.rows[i].cells;
        var id = parseInt(cells[0].innerHTML);
        if ( id === parseInt(student_id)) {
            // delete the row
            table_score.deleteRow(i);
            return;
        }
    }
}

function modify() {
    var student_id = document.getElementById("student_id").value;
    var student_score = document.getElementById("student_score").value;
    var table_score = document.getElementById("table_score");

    if (student_id === "" || student_score === "") {
        alert("请输入学号和成绩后添加 -_-!");
        return;
    }

    modify_entry(table_score, student_id, student_score);

    document.getElementById('student_id').focus();

    // clear data
    clear_input_data();
}

function modify_entry(table, student_id, student_score) {

    var modified = false;
    var row_to_add = -1;

    var student_id = parseInt(student_id);
    var student_score = parseInt(student_score);

    for (i=1; i<table_score.rows.length; i++) {
        var cells = table_score.rows[i].cells;
        var id = parseInt(cells[0].innerHTML);

        if (id === student_id) {
            // modify the value
            cells[1].innerHTML = student_score;
            modified = true;
            break;
        } else if (id < student_id) {
            continue;
        } else {
            row_to_add = i;
            break;
        }
    }

    if (! modified) {
        var row = table_score.insertRow(row_to_add);
        row.insertCell(0).innerHTML = student_id;
        row.insertCell(1).innerHTML = student_score;
    }
}

function clear_input_data() {
    document.getElementById('student_id').value = "";
    document.getElementById('student_score').value = "";
}

function table_to_csv(table) {
    var csv_string = "";
    for (i=0; i<table.rows.length; i++) {
        var cells = table_score.rows[i].cells;
        for (j=0; j<cells.length; j++) {
            csv_string += cells[j].innerHTML;
            csv_string += ',';
        }
        csv_string += '\r\n';
    }

    return csv_string
}

function save_to_csv(filename) {
    var table_score = document.getElementById("table_score");
    var data = table_to_csv(table_score);

    var exportLink = document.createElement('a');
    exportLink.setAttribute('href', 'data:application/csv;charset=utf-8,' + encodeURIComponent(data));
    exportLink.appendChild(document.createTextNode('test.csv'));
    exportLink.setAttribute('download', filename);
    document.getElementById('results').appendChild(exportLink);
    exportLink.click();
    document.getElementById('results').removeChild(exportLink);
}

function load_to_table(table, csv_data) {
    arrayOfLines = csv_data.match(/[^\r\n]+/g);
    for (line of arrayOfLines.slice(1)) {
        data_array = line.match(/[0-9]+/g);
        modify_entry(table, data_array[0], data_array[1]);
    }
}

function load_from_csv(csv_data) {
    var table_score = document.getElementById("table_score");

    load_to_table(table_score, csv_data);
}


// check for File API support
function checkFileAPI() {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        return true;
    } else {
        alert('The File APIs are not fully supported by your browser. Fallback required.');
        return false;
    }
}


function upload(evt) {
    if (checkFileAPI()) {
        var data = null;
        var file = evt.target.files[0];
        var reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function(event) {
            var csvData = event.target.result;
            load_from_csv(csvData);
        };
        reader.onerror = function() {
            alert('Unable to read ' + file.fileName);
        };
    }
}

function body_onload() {
    document.getElementById('txtFileUpload').addEventListener('change', upload, false);
}

</script>

</head>

<body onload="body_onload()">

<div class="usage">
<p>
使用说明
</p>
<ol>
    <li>输入学号和成绩 </li>
    <li>点击 修改/添加 按钮添加行或修改已有行</li>
    <li>删除按钮可删除行（对应学号）</li>
</ol>
</div>

<div class="table">
<table id="table_score">
    <tr>
    <th>学号</th>
    <th>成绩</th>
    </tr>
</table>
</div>

<div class="modify">
<p>
这里是修改成绩的功能
</p>
<p>
<button onclick="remove_row()">删除</button>
学号： <input type="text" name="student_id" id="student_id" />
成绩： <input type="text" name="student_score" id="student_score"
onkeypress="searchKeyPress(event)" />
<button onclick="modify()" id="btn_modify">修改/添加</button>
</p>
</div>

<div class="save-load">
<p>
这里是保存的功能
</p>
<p>
<button onclick="save_to_csv('test.csv')" id="btn_save">保存为CSV</button>
</p>
<div id="results"></div>
</div>

<div class="save-load">
<p>
这里是载入的功能
</p>
<p>
<input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />
</p>
</div>

<p>
注意事项：保存的文件为CSV格式，可以直接用 Excel
打开。如果要载入现在的文件，最好刷新一下当前页面。
</p>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">

	<style>
	#table_score {
	border-collapse: collapse;
	padding: 12px;
	}

	#table_score th, #table_score td {
	border: 1px solid #333;
	border: 1px solid #98bf21;
	padding: 3px 7px 2px 7px;
	}

	#table_score th{
	font-size: 1.1em;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 4px;
	background-color: #A7C942;
	color: #ffffff;
	}

	#table_score tr:nth-child(odd) td {
	color: #000000;
	background-color: #EAF2D3;
	}

	.usage , .modify, .save-load {
	border: 1px solid #EFEFEF;
	margin: 5px;
	}

	.table {
	margin: 10px;
	}
	</style>

	<script>

	// trigger btn_modify when Enter key is pressed.
	function searchKeyPress(e)
	{
	// look for window.event in case event isn't passed in
	e = e \|\| window.event;
	if (e.keyCode == 13)
	{
	document.getElementById('btn_modify').click();
	}
	}

	function remove_row() {
	var student_id = parseInt(document.getElementById("student_id").value);
	var table_score = document.getElementById("table_score");

	remove_entry(table_score, student_id);

	document.getElementById('student_id').focus();
	clear_input_data();
	}

	function remove_entry(table, student_id) {
	for (i=1; i<table.rows.length; i++) {
	var cells = table_score.rows[i].cells;
	var id = parseInt(cells[0].innerHTML);
	if ( id === parseInt(student_id)) {
	// delete the row
	table_score.deleteRow(i);
	return;
	}
	}
	}

	function modify() {
	var student_id = document.getElementById("student_id").value;
	var student_score = document.getElementById("student_score").value;
	var table_score = document.getElementById("table_score");

	if (student_id === "" \|\| student_score === "") {
	alert("请输入学号和成绩后添加 -_-!");
	return;
	}

	modify_entry(table_score, student_id, student_score);

	document.getElementById('student_id').focus();

	// clear data
	clear_input_data();
	}

	function modify_entry(table, student_id, student_score) {

	var modified = false;
	var row_to_add = -1;

	var student_id = parseInt(student_id);
	var student_score = parseInt(student_score);

	for (i=1; i<table_score.rows.length; i++) {
	var cells = table_score.rows[i].cells;
	var id = parseInt(cells[0].innerHTML);

	if (id === student_id) {
	// modify the value
	cells[1].innerHTML = student_score;
	modified = true;
	break;
	} else if (id < student_id) {
	continue;
	} else {
	row_to_add = i;
	break;
	}
	}

	if (! modified) {
	var row = table_score.insertRow(row_to_add);
	row.insertCell(0).innerHTML = student_id;
	row.insertCell(1).innerHTML = student_score;
	}
	}

	function clear_input_data() {
	document.getElementById('student_id').value = "";
	document.getElementById('student_score').value = "";
	}

	function table_to_csv(table) {
	var csv_string = "";
	for (i=0; i<table.rows.length; i++) {
	var cells = table_score.rows[i].cells;
	for (j=0; j<cells.length; j++) {
	csv_string += cells[j].innerHTML;
	csv_string += ',';
	}
	csv_string += '\r\n';
	}

	return csv_string
	}

	function save_to_csv(filename) {
	var table_score = document.getElementById("table_score");
	var data = table_to_csv(table_score);

	var exportLink = document.createElement('a');
	exportLink.setAttribute('href', 'data:application/csv;charset=utf-8,' + encodeURIComponent(data));
	exportLink.appendChild(document.createTextNode('test.csv'));
	exportLink.setAttribute('download', filename);
	document.getElementById('results').appendChild(exportLink);
	exportLink.click();
	document.getElementById('results').removeChild(exportLink);
	}

	function load_to_table(table, csv_data) {
	arrayOfLines = csv_data.match(/[^\r\n]+/g);
	for (line of arrayOfLines.slice(1)) {
	data_array = line.match(/[0-9]+/g);
	modify_entry(table, data_array[0], data_array[1]);
	}
	}

	function load_from_csv(csv_data) {
	var table_score = document.getElementById("table_score");

	load_to_table(table_score, csv_data);
	}


	// check for File API support
	function checkFileAPI() {
	if (window.File && window.FileReader && window.FileList && window.Blob) {
	return true;
	} else {
	alert('The File APIs are not fully supported by your browser. Fallback required.');
	return false;
	}
	}


	function upload(evt) {
	if (checkFileAPI()) {
	var data = null;
	var file = evt.target.files[0];
	var reader = new FileReader();
	reader.readAsText(file);
	reader.onload = function(event) {
	var csvData = event.target.result;
	load_from_csv(csvData);
	};
	reader.onerror = function() {
	alert('Unable to read ' + file.fileName);
	};
	}
	}

	function body_onload() {
	document.getElementById('txtFileUpload').addEventListener('change', upload, false);
	}

	</script>

	</head>

	<body onload="body_onload()">

	<div class="usage">
	<p>
	使用说明
	</p>
	<ol>
	<li>输入学号和成绩 </li>
	<li>点击修改/添加按钮添加行或修改已有行</li>
	<li>删除按钮可删除行（对应学号）</li>
	</ol>
	</div>

	<div class="table">
	<table id="table_score">
	<tr>
	<th>学号</th>
	<th>成绩</th>
	</tr>
	</table>
	</div>

	<div class="modify">
	<p>
	这里是修改成绩的功能
	</p>
	<p>
	<button onclick="remove_row()">删除</button>
	学号： <input type="text" name="student_id" id="student_id" />
	成绩： <input type="text" name="student_score" id="student_score"
	onkeypress="searchKeyPress(event)" />
	<button onclick="modify()" id="btn_modify">修改/添加</button>
	</p>
	</div>

	<div class="save-load">
	<p>
	这里是保存的功能
	</p>
	<p>
	<button onclick="save_to_csv('test.csv')" id="btn_save">保存为CSV</button>
	</p>
	<div id="results"></div>
	</div>

	<div class="save-load">
	<p>
	这里是载入的功能
	</p>
	<p>
	<input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />
	</p>
	</div>

	<p>
	注意事项：保存的文件为CSV格式，可以直接用 Excel
	打开。如果要载入现在的文件，最好刷新一下当前页面。
	</p>

	</body>
	</html>