<html>
<head>
<style>
#input {
float:right;
border:1px solid black;
padding-bottom:5px;
padding-left:5px;
margin:10px;
background-color:#EEEEEE;
text-align:right;
direction:rtl;
}
#textInput {
float:right;
text-align:right;
direction:rtl;
margin-right:10px;
margin-top:7px;
width:80px;
}
#p1 {
margin:6;
width:80px;
}
#textBoxInput {
float:right;
line-height:20px;
margin-top:7px;
}
#fname {
margin:3;
}
#lname {
margin:3;
}
#salary {
margin:3;
}
#fromDate {
margin:3;
}
#toDate {
margin:3;
}
#butonAdd {
text-align:center;
float:right;
margin-top:180px;
margin-right:-200px;
}
#btnAdd {
width:100px;
height:30px;
font-weight:bold;
font-size:15px;
}
#table {
text-align:center;
direction:rtl;
margin-left:200px;
margin-top:40px;
border-collapse:collapse;
}
</style>
<script>
var textNodeFname;
var textNodelname;
var textNodefDate;
var textNodetDate;
var textNodeSalary;
var tdFname;
var tdLname;
var tdfDate;
var tdtDate;
var tdSalary;
var tr;
var table;
var valueFname;
function Add() {
//td
tr = document.createElement("tr");
//tr
tdFname = document.createElement("td");
tdLname = document.createElement("td");
tdfDate = document.createElement("td");
tdtDate = document.createElement("td");
tdSalary = document.createElement("td");
var tdEditDelete = document.createElement("td");
var tdCheckbox = document.createElement("td");
//input-button-edit
var btnNode = document.createElement("input");
btnNode.setAttribute('type', 'button');
btnNode.setAttribute('value', 'ویرایش');
btnNode.onclick = function () {
Edit()
};
//input-button-delete
var buttonNodDel = document.createElement("input");
buttonNodDel.setAttribute('type', 'button');
buttonNodDel.setAttribute('value', 'X');
buttonNodDel.onclick = function () {
del()
};
//input-checkbox
var chekboxNode = document.createElement("input");
chekboxNode.setAttribute('type', 'checkbox');
//value
valueFname = document.getElementById("fname").value;
var valuelname = document.getElementById("lname").value;
var valuefDate = document.getElementById("fromDate").value;
var valuetDate = document.getElementById("toDate").value;
var valueSalary = document.getElementById("salary").value;
//textNode
textNodeFname = document.createTextNode(valueFname);
textNodelname = document.createTextNode(valuelname);
textNodefDate = document.createTextNode(valuefDate);
textNodetDate = document.createTextNode(valuetDate);
textNodeSalary = document.createTextNode(valueSalary);
table = document.getElementById("table");
if (document.getElementById('btnAdd').value == 'اضافه') {
//appendChild tr to table
table.appendChild(tr);
//appendchild td to tr
tr.appendChild(tdFname);
tr.appendChild(tdLname);
tr.appendChild(tdfDate);
tr.appendChild(tdtDate);
tr.appendChild(tdSalary);
tr.appendChild(tdEditDelete);
tr.appendChild(tdCheckbox);
//appendchild value to td
tdFname.appendChild(textNodeFname);
tdLname.appendChild(textNodelname);
tdfDate.appendChild(textNodefDate);
tdtDate.appendChild(textNodetDate);
tdSalary.appendChild(textNodeSalary);
tdEditDelete.appendChild(btnNode);
tdEditDelete.appendChild(buttonNodDel);
tdCheckbox.appendChild(chekboxNode);
//empty value
document.getElementById("fname").value = " ";
document.getElementById("lname").value = " ";
document.getElementById("fromDate").value = " ";
document.getElementById("toDate").value = " ";
document.getElementById("salary").value = " ";
} else if (document.getElementById('btnAdd').value == 'اصلاح')
{
//empty value
document.getElementById("fname").value = " ";
document.getElementById("lname").value = " ";
document.getElementById("fromDate").value = " ";
document.getElementById("toDate").value = " ";
document.getElementById("salary").value = " ";
document.getElementById('btnAdd').value = 'اضافه';
}
}
function Edit() {
document.getElementById("fname").value = tdFname.innerHTML;
document.getElementById("lname").value = tdLname.innerHTML;
document.getElementById("fromDate").value = tdfDate.innerHTML;
document.getElementById("toDate").value = tdtDate.innerHTML;
document.getElementById("salary").value = tdSalary.innerHTML;
document.getElementById('btnAdd').value = 'اصلاح';
}
function del() {
}
</script>
</head>
<body>
<div id="input">
<!-- div-text-->
<div id="textInput">
<p id="p1">نام :</p>
<p id="p1">نام خانوادگي :</p>
<p id="p1">تاریخ شروع :</p>
<p id="p1">تاریخ پایان :</p>
<p id="p1">حقوق :</p>
</div>
<!-- div-textBox-->
<div id="textBoxInput">
<input type="txt" id="fname" />
</br>
<input type="txt" id="lname" />
</br>
<input type="txt" id="fromDate" />
</br>
<input type="txt" id="toDate" />
</br>
<input type="txt" id="salary" />
</br>
</div>
</div>
<div id="butonAdd">
<input type="button" value="اضافه" onclick="Add()" id="btnAdd" />
</div>
<!--table -->
<table id="table" border="1px" width="500px">
<tr id="tr1">
<th>نام</th>
<th>نام خانوادگي</th>
<th>تاریخ شروع</th>
<th>تاریخ پایان</th>
<th>حقوق</td>
<th>ویرایش/حذف</th>
<th>
<input name="cbox" type="checkbox" value="1" id="tableCheckbox">
</th>
</tr>
</table>
</body>
</html>