بازگشت به درس

ویرایش TD با click

اهمیت: 5

سلول‌های جدول را با کلیک قابل ویرایش کنید.

  • با کلیک – سلول باید “قابل ویرایش” باشد. (textarea داخل آن نمایش داده شود)،‌ ما می‌توانیم HTML را تغییر دهیم. هیچ تفییر سایزی نباید وجود داشته باشد،‌تمام اندازه‌های هندسی باید یکسان بمانند.
  • دکمه‌های OK و CANCEL زیر سلول ظاهر می‌شوند تا ویرایش کردن را تمام/کنسل کنند.
  • دذ لحظه تنها یک سلول می‌تواند قابلیت ویرایش داشته باشد. زمانی که یک <td> در “حالت ویرایش” است، کلیک‌های روی بقیه سلول‌ها نادیده گرفته می‌شوند.
  • جدول ممکن است سلول‌های زیادی داشته باشد. از event delegation استفاده کنید.

نسخه‌ی نمایشی:

باز کردن یک sandbox برای تمرین.

  1. با کلیک – innerHTML سلول <textarea> را با چیزی با همان سایز اما بدون border جایگزین کنید. می‌توانید از JavaScript یا CSS استفاده کنید تا سایز درست را تنظیم کنید. 2.مقدار textarea.value را برابر td.innerHTML قرار دهید.
  2. روی textarea فوکوس کنید.
  3. کلیدهای OK/CANCEL را زیر سلول نشان دهید و به کلیک‌های روی آن‌ها رسیدگی کنید.

باز کردن راه‌حل درون sandbox.