<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="dataInput1" placeholder="Data 1">
<input type="text" id="dataInput2" placeholder="Data 2">
<input type="text" id="dataInput3" placeholder="Data 3">
<button id="addData">Add</button>
<table id="dataTable">
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script>
$(document).ready(function() {
const data = JSON.parse(localStorage.getItem('data')) || [];
function appendDataToTable() {
const $tableBody = $('#dataTable tbody');
$tableBody.empty();
data.forEach(item => {
const [data1, data2, data3] = item;
$tableBody.append(`<tr><td>${data1}</td><td>${data2}</td><td>${data3}</td></tr>`);
});
}
$('#addData').click(function() {
const data1 = $('#dataInput1').val();
const data2 = $('#dataInput2').val();
const data3 = $('#dataInput3').val();
if (data1.trim() !== '' && data2.trim() !== '' && data3.trim() !== '') {
data.push([data1, data2, data3]);
localStorage.setItem('data', JSON.stringify(data));
appendDataToTable();
$('#dataInput1, #dataInput2, #dataInput3').val('');
}
});
appendDataToTable();
});
</script>
</html>