• 1399/05/05

تغییر رنگ tr در table بعد از تیک خوردن checkbox :

سلام  وقتتون بخیر

با استفاده از متد map یک جدول ساختم (تگ های table, thead,tbody, tr, td) که اولین ستون جدول (td داخل tr) با checkbox پر شده  و میخوام وقتی روی هر check box  در هر ردیف کلیک کردم و تیک خورد رنگ اون ردیف (tr) عوض بشه و تا وقتی که تیک  check box را برنداشتم همین رنگ باقی بمونه. راستش خیلی سرچ زدم متاسفانه به نتیجه ای نرسیدم. یعنی یا با زدن تیک هر check box کل جدول (تمام trها) تغییر رنگ میده و یا اگرم تنها همان ردیف مدنظر رنگش تغییر کرد با تیک خوردن  check box  دیگر ردیف ها، رنگ ردیفی که از قبل  check boxش تیک خورده بوده از بین میرود. ممنون میشم اگه راهنماییم کنید.

  • 1399/05/05
  • ساعت 10:34

سلام دوست من

متد map نه تنها پارامتر دریافتی بلکه ایندکس رو هم در دسترس قرار میده

persons.map((person, index) => {
	<tr 
		key={index} 
		className={this.state.selectedRow === index ? 'selectedRow' : 						      ''}>
		....
		</tr>
})

می تونی از این مثال استفاده کنی

توسط checkBox بیا state مرتبط با ردیف انتخابی رو کنترل کن

و توسط استایل دهی شرطی چک کن اگر کلید اون ردیف برابر کلیدی که توی state بود کلاس تغییر رنگ رو بده به اون ردیف در غیر این صورت هیچ

موفق باشی


  • 1399/05/05
  • ساعت 11:30

ممنونم از اینکه وقت میذارین و به سوالاتمون جواب میدین.


logo-samandehi