Chciałbym zrobić strone gdzie wyświetlana jest tabela i każdy ma możliwość możliwość dodania nowych wierszy, jednak po zalogowaniu się przez administratora (hasło z góry przypisane) to jest możliwość również edycji wierszy i usunięcie.
Mam zrobioną tabele z dodawaniem/edycją/usuwaniem ale nie wiem jak ustawić żeby bez logowania było widoczne tylko dodawanie?
bardzo prosiłbym o porady.
Robię to pierwszy raz dlatego proszę o wyrozumienie :)
<!DOCTYPE html>
<html>
<head>
<title>Add Edit Remove HTML Table Row</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{overflow: hidden}
.tab{float: left;}
.tab-2{margin-left: 50px}
.tab-2 input{display: block;margin-bottom: 10px}
tr{transition:all .25s ease-in-out}
tr:hover{background-color:#EEE;cursor: pointer}
</style>
</head>
<body>
<div class="container">
<div class="tab tab-1">
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>10</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>30</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>20</td>
</tr>
</table>
</div>
<div class="tab tab-2">
First Name :<input type="text" name="fname" id="fname">
Last Name :<input type="text" name="lname" id="lname">
Age :<input type="number" name="age" id="age">
<button onclick="addHtmlTableRow();">Add</button>
<button onclick="editHtmlTbleSelectedRow();">Edit</button>
<button onclick="removeSelectedRow();">Remove</button>
</div>
</div>
<script>
var rIndex,
table = document.getElementById("table");
// check the empty input
function checkEmptyInput()
{
var isEmpty = false,
fname = document.getElementById("fname").value,
lname = document.getElementById("lname").value,
age = document.getElementById("age").value;
if(fname === ""){
alert("First Name Connot Be Empty");
isEmpty = true;
}
else if(lname === ""){
alert("Last Name Connot Be Empty");
isEmpty = true;
}
else if(age === ""){
alert("Age Connot Be Empty");
isEmpty = true;
}
return isEmpty;
}
// add Row
function addHtmlTableRow()
{
// get the table by id
// create a new row and cells
// get value from input text
// set the values into row cell's
if(!checkEmptyInput()){
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
fname = document.getElementById("fname").value,
lname = document.getElementById("lname").value,
age = document.getElementById("age").value;
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = age;
// call the function to set the event to the new row
selectedRowToInput();
}
}
// display selected row data into input text
function selectedRowToInput()
{
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
// get the seected row index
rIndex = this.rowIndex;
document.getElementById("fname").value = this.cells[0].innerHTML;
document.getElementById("lname").value = this.cells[1].innerHTML;
document.getElementById("age").value = this.cells[2].innerHTML;
};
}
}
selectedRowToInput();
function editHtmlTbleSelectedRow()
{
var fname = document.getElementById("fname").value,
lname = document.getElementById("lname").value,
age = document.getElementById("age").value;
if(!checkEmptyInput()){
table.rows[rIndex].cells[0].innerHTML = fname;
table.rows[rIndex].cells[1].innerHTML = lname;
table.rows[rIndex].cells[2].innerHTML = age;
}
}
function removeSelectedRow()
{
table.deleteRow(rIndex);
// clear input text
document.getElementById("fname").value = "";
document.getElementById("lname").value = "";
document.getElementById("age").value = "";
}
</script>
</body>
</html>
Logowanie:
<html>
<head>
<title>Login</title>
<center>
<h1>Login</h1>
</center>
</head>
<body>
<center>
<input type="text" id="username" placeholder="Username"><br />
<input type="password" id="password" placeholder="Password"><br />
<input type="button" value="Log on" onClick="clicked()">
</center>
<script>
function clicked() {
var user = document.getElementById('username');
var pass = document.getElementById('password');
var coruser = "test";
var corpass = "123";
if(user.value == coruser) {
if(pass.value == corpass) {
window.alert("You are logged in as " + user.value);
window.open("indexc.html");
} else {
window.alert("Incorrect username or password!");
}
} else {
window.alert("Incorrect username or password!");
}
}
</script>
</body>
</html>