نريد أن نتيح هذا المشروع المفتوح المصدر إلى كل الناس حول العالم. من فضلك ساعدنا على ترجمة محتوى هذه السلسله للغة التى تعرفها.
خريطة الدورة التعليمية
الرجوع الي الدرس
هذة المادة العلميه متاحه فقط باللغات الأتيه: English, Español, فارسی, Français, Indonesia, Italiano, 日本語, 한국어, Русский, Українська, Oʻzbek, 简体中文. من فضلك, ساعدنا قم بالترجمه إلى عربي.

Edit TD on click

الأهمية: 5

Make table cells editable on click.

  • On click – the cell should became “editable” (textarea appears inside), we can change HTML. There should be no resize, all geometry should remain the same.
  • Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
  • Only one cell may be editable at a moment. While a <td> is in “edit mode”, clicks on other cells are ignored.
  • The table may have many cells. Use event delegation.

The demo:

افتح sandbox للمهمه.

  1. On click – replace innerHTML of the cell by <textarea> with same sizes and no border. Can use JavaScript or CSS to set the right size.
  2. Set textarea.value to td.innerHTML.
  3. Focus on the textarea.
  4. Show buttons OK/CANCEL under the cell, handle clicks on them.

افتح الحل في sandbox.