Bootstrap-jquery Address Book

Developer
Omran Abazid
Size
2,650 Kb
Views
18,216
  1. Bootstrap-jquery Address Book Previews
  2. Bootstrap-jquery Address Book HTML Codes
  3. Bootstrap-jquery Address Book CSS Codes
  4. Bootstrap-jquery Address Book JS Codes

How do I make an bootstrap-jquery address book?

Bootstrap-jquery Address Book that used module revealing pattern. What is a bootstrap-jquery address book? How do you make a bootstrap-jquery address book? This script and codes were developed by Omran Abazid on 09 September 2022, Friday.

Bootstrap-jquery Address Book Previews
IQ Test

Bootstrap-jquery Address Book - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title> bootstrap-jquery Address Book </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<body> <div class="container"> <header> <h1>Address Book</h1> <hr /> </header> <table id='table1' class="table table-bordered"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Phone</th> <th>Action</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <td> <input id='firstName' class='form-control' type="text" /> </td> <td> <input id='lastName' class='form-control' type="text" /> </td> <td> <input id='phone' class='form-control' type="text" /> </td> <td> <div class="text-center"> <button id='add' class='btn btn-block' />Add</button> </div> </td> </tr> </tfoot> </table> </div>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bootstrap-jquery Address Book - Script Codes CSS Codes

input { background:rgba(0,0,0,0); border:none; width: 100%; height: 100%;
}

Bootstrap-jquery Address Book - Script Codes JS Codes

//https://jsfiddle.net/L3615eL1/
var addressBook = (function() { var people = [{ firstName: 'Omran', lastName: 'Abazid', phone: '123456789' }]; //cash the dom var table = $('#table1'); var tbody = table.find('tbody'); var $firstName = table.find('#firstName'); var $lastName = table.find('#lastName'); var $phone = table.find('#phone'); var $button = table.find('#add'); var $btnSave = table.find('#save'); var $btnEdit = table.find('#edit'); var $btnRemove = table.find('#remove'); var $input = table.find(".edit"); //bind events $button.on('click', addPerson); table.on('click', '#remove', deletePerson); /*table.on("change",'.edit' ,editPerson);*/ console.log($input); _render(); //render function _render() { tbody.html(''); var length = people.length; for (var i = 0; i < length; i++) { table.prepend('<tr><td><input class="edit" type="text" value="' + people[i].firstName + '" ></td><td><input class="edit" type="text" value="' + people[i].lastName + '" ></td><td><input type="text" class="edit" value="' + people[i].phone + '" ></td><td> <button id="remove" class="btn btn-block">X</button></td></tr>'); } } //custom function function addPerson() { var person = { firstName: $firstName.val(), lastName: $lastName.val(), phone: $phone.val() }; people.push(person); $firstName.val(''); $lastName.val(''); $phone.val(''); _render() } function deletePerson(event) { var element = event.target.closest('tr'); var i = table.find('td').index(element); people.splice(i, 1); _render(); } /* function editPerson(event){ var element=event.target.closest('tr');	var i=table.find('tr').index(element); var index = (table.find('tr').length -i)-1; console.log(element.firstChild()); var person= { firstName: , lastName: $lastName.val(), phone: $phone.val() }; _render(); }
*/ return { addPerson: addPerson, deletePerson: deletePerson };
})();
Bootstrap-jquery Address Book - Script Codes
Bootstrap-jquery Address Book - Script Codes
Home Page Home
Developer Omran Abazid
Username OmranAbazid
Uploaded September 09, 2022
Rating 3
Size 2,650 Kb
Views 18,216
Do you need developer help for Bootstrap-jquery Address Book?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Omran Abazid (OmranAbazid) Script Codes
Name
Bootstrap Portfolio Website
Twitch API Template
FCC Campers News
Tic tac toe
A Pen by Omran Abazid
Bootstrap page Header Template
Quote Machine
Simple Jquery Calculator
Simon Game without jquery
Pomodora Timer
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!