Tryit Editor - Free-Learn

<!DOCTYPE html>
<html>
<head>
<style>

body{
 font-family:tahoma;
 font-size:14px;
 direction:rtl;
}

table{
 width:100%;
 border-spacing:5px;
}

table,td{
 border:2px solid #000;
}

td{
 padding:10px;
 text-align:center;
}

th{
 background-color:#2196F3;
 color:#fff;
 border:2px solid black;
 padding:5px;
}

span.user-status{
 padding:4px 10px;
 border-radius:20px;
}

</style>
</head>
<body>

<table>
<tr>
<th>نام</th>
<th>فامیلی</th>
<th>وضعیت</th>
</tr>
<tr>
 <td>صادق</td>
 <td>اسدی</td>
 <td><span class="user-status">فعال</span></td>
</tr>
<tr>
 <td>رضا</td>
 <td>شیری</td>
 <td><span class="user-status">فعال</span></td>
</tr>
<tr>
 <td>محسن</td>
 <td>آقایی</td>
 <td><span class="user-status">مسدود</span></td>
</tr>
<tr>
 <td>مونا</td>
 <td>اکبری</td>
 <td><span class="user-status">فعال</span></td>
</tr>
</table>

var MyStatus , i;
MyStatus = document.querySelectorAll(".user-status");
for( i=0 ; i < MyStatus.length ; i++ ){
 if( MyStatus[i].innerHTML== "فعال" ){
  MyStatus[i].style.backgroundColor = "green";
  MyStatus[i].style.color = "#fff";
 }else{
  MyStatus[i].style.backgroundColor = "red";
  MyStatus[i].style.color = "#fff";
 }
}

</script>

</body>
</html>

سایت آموزشی فری لرن