طلب تعديل كود javascript

ArabicPro

لدي كود يقوم بتحرير كل صف بشكل مستقل في جدول، أريد تغير طريقة عمله بحيث لو أضغط تحرير يتم إتاحة التعديل على كامل الجدول وليس صف واحد فقط، فعملية الضغط على تحرير في كل صف متعبة وتأخذ وقت.

$('.editbtn').click(function() {
	var $this = $(this);
	var tds = $this.closest('tr').find('td').filter(function() {
		return $(this).find('.editbtn').length === 0;
	});
	if ($this.html() === 'Edit') {
		$this.html('Save');
		tds.prop('contenteditable', true);
	} else {
		$this.html('Edit');
		tds.prop('contenteditable', false);
	}
});
يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

يمكنك التخلص من عملية الفلترة فيكون العائد من tds يمثل كامل الجدول

  • من أي زر نبحث عن بداية الجدول الحالي (الأب)
  • ثم نجلب جميع الخلايا
  • نطبق الفلترة كما هي أو نتخلى عنها حسب ما يعطي نتيجة أفضل
var tds = $this.parent('table').find('td').filter(function() {
		return $(this).find('.editbtn').length === 0;
	});

أو

var tds = $this.parent('table').find('td');

ثم لتعديل القيم ضمن الحلقة tds سوف تعيد عدة خلايا، يمكن المرور عليهم بحلقة

tds.each(function() {
  this.prop('contenteditable', true);  // نفسها للجزء الثاني
});

شكراً جزيلا على سرعة الرد، من فضلك ممكن الكود كامل بعد التعديل، جربت ولكن لم ينجح معي

من فضلك ممكن مثال كامل مع الكود

$('.editbtn').click(function() {
	var $this = $(this);
	var tds = $this.parent('table').find('td');

	if ($this.html() === 'Edit') {
		$this.html('Save');
		tds.each(function() {
        this.prop('contenteditable', true);  // نفسها للجزء الثاني
});
	} else {
		$this.html('Edit');
		tds.each(function() {
      this.prop('contenteditable', false);  // نفسها للجزء الثاني
});
	}
});

عليك إرفاق HTML لأستطيع تجريبه لدي،