Www.Free-Learn.Ir
اجرا کن »
<!DOCTYPE html> <html> <head> <style> table{width:100%;} #tasksTable td{border:1px solid black;} </style> </head> <body> <div> <button id="myBtn">اضافه کردن مشتری جدید</button> </div> <div> <table id="tasksTable"> <thead> <tr style="background-color:lightgreen"> <th>نام</th> <th>فامیلی</th> </tr> </thead> </table> </div> <div id="myModal" class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h3>لطفا مشخصات را وارد نمایید</h3> </div> <div class="modal-body"> <table> <tr> <td style="width:150px">نام:</td> <td><input type="text" name="name" id="taskname"></td> </tr> <tr> <td> فامیلی: </td> <td> <input type="text" name="desc" id="taskdesc"> </td> </tr> </table> </div> <br> <div class="modal-footer"> <button type="submit" value="submit" onclick="addTasks()">ثبت کن</button> <br> </div> </div> </div> <script> var tasks = []; var descs = []; var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } var rowCount = 1; function addTasks() { var qwq=document.getElementById("taskname"); var qee=document.getElementById("taskdesc"); tasks.push(document.getElementById("taskname").value); descs.push(document.getElementById("taskdesc").value); var table = document.getElementById("tasksTable"); var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = tasks[rowCount - 1]; cell2.innerHTML = descs[rowCount - 1]; rowCount++; modal.style.display = "none"; qwq.value=""; qee.value=""; } </script> </body> </html>