कैसे बनाएं: तालिका

CSS और JavaScript का उपयोग करके

सूची आइटम लिस्ट बनाएं

पहला कदम - HTML जोड़ें:

<div id="myDIV" class="header">
  <h2>मेरी टू डो लिस्ट</h2>
  <input type="text" id="myInput" placeholder="शीर्षक...">
  <span onclick="newElement()" class="addBtn">जोड़ें</span>
</div>
<ul id="myUL">
  <li>जिम जाएं</li>
  <li class="checked">बिल चुकाएं</li>
  <li>जॉर्ज से मुलाकात करें</li>
  <li>अण्डे खरीदें</li>
  <li>पुस्तक पढ़ें</li>
  <li>ऑफिस व्यवस्था करें</li>
</ul>

दूसरा कदम - CSS जोड़ें:

शीर्षक और सूची के शैली को सेट करें:

/* आइटम के आंतरिक जीह और किनारा को एलीमेंट के कुल चौड़ाई और ऊंचाई में शामिल करें */
* {
  box-sizing: border-box;
}
/* सूची से बाहरी और भीतरी जीह (माउंट) हटाएं */
ul {
  मार्गिन: 0;
  padding: 0;
}
/* सूची आइटम के शैली को सेट करें */
ul li {
  कर्सर: पॉइंटर;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  /* सूची आइटम अयोग्य बनाएं */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* सभी विषम सूची आइटम को अलग रंग दें (झींगा तारा) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}
/* माउस झूठे पर पृष्ठभूमि रंग छोटा होता है */
ul li:hover {
  background: #ddd;
}
/* छूने पर, पृष्ठभूमि रंग जोड़ें और पाठ को खोदें */
ul li.checked {
  background: #888;
  color: #fff;
  टेक्स्ट-डिकोरेशन: लाइन-थ्रॉट;
}
/* क्लिक करने पर 'चेकेड' टैग जोड़ें */
यूएल ली चेकेड::आफटर {
  कंटेंट: '';
  पोजीशन: एब्सोल्यूट;
  बॉर्डर-कलर: #fff;
  बॉर्डर-स्टाइल: सॉलिड;
  बॉर्डर-विस्तार: 0 2पिक्सल 2पिक्सल 0;
  टॉप: 10पिक्सल;
  बाएँ: 16पिक्सल;
  ट्रांसफॉर्म: रोटेट(45डिग्री);
  ऊंचाई: 15पिक्सल;
  विद्धि: 7पिक्सल;
}
/* बंद बटन के शैली को सेट करें */
.क्लोज़ {
  पोजीशन: एब्सोल्यूट;
  दायाँ: 0;
  टॉप: 0;
  पैडिंग: 12px 16px 12px 16px;
}
.क्लोज़:हॉवर {
  बैकग्राउंड-कलर: #f44336;
  कलर: श्वेत;
}
/* हेडर के शैली को सेट करें */
.हेडर {
  बैकग्राउंड-कलर: #f44336;
  पैडिंग: 30px 40px;
  कलर: श्वेत;
  टेक्स्ट-एलिगेंट: सेंटर;
}
/* हेडर के बाद के फ्लोट को साफ करें */
.हेडर:ऐफटर {
  कंटेंट: "";
  डिस्प्ले: टेबल;
  क्लीयर: बॉथ;
}
/* इनपुट फील्ड के शैली को सेट करें */
इनपुट {
  मार्गिन: 0;
  बॉर्डर: नहीं;
  बॉर्डर-रेडियस: 0;
  विद्धि: 75%;
  पैडिंग: 10px;
  फ्लोट: लेफ्ट;
  फॉन्ट-साइज: 16px;
}
/* 'जोड़ें' बटन के शैली को सेट करें */
.एडडीबीटन {
  पैडिंग: 10px;
  विद्धि: 25%;
  बैकग्राउंड: #d9d9d9;
  कलर: #555;
  फ्लोट: लेफ्ट;
  टेक्स्ट-एलिगेंट: सेंटर;
  फॉन्ट-साइज: 16px;
  कर्सर: पॉइंटर;
  ट्रांजिशन: 0.3s;
  बॉर्डर-रेडियस: 0;
}
.एडडीबीटन:हॉवर {
  बैकग्राउंड-कलर: #bbb;
}

तीसरा कदम - जावास्क्रिप्ट जोड़ें:

// एक बार एक 'बंद' बटन बनाकर हर लिस्ट आइटम पर जोड़ें
वार माइनोलिस्ट = डॉक्युमेंट.गेटटैगनैमेंट("एलआई");
var i;
साइक्ल (आई = 0; आई < माइनोलिस्ट.लैंग्थ; आई++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}
// बंद बटन पर क्लिक करके मौजूदा सूची आंश को छुपाया जाता है
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}
// सूची आंश पर क्लिक करने पर 'चेकेड' चिह्न जोड़ा जाता है
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);
// जब "जोड़ें" बटन पर क्लिक किया जाता है तो एक नया सूची आंश बनाया जाता है
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);
  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

स्वयं अभिप्राय से प्रयोग करें