Хотите добавить разные цвета к разным идентификаторам Dynami c в таблице

Question

У меня проблемы с <tr> цветом фона, имея тот же <tr id=""> Вот моя таблица.

<table class="table">
<tr id="2552">
<td>Roll No 1</td>
<td>800</td>
</tr>
<tr id="2552">
<td>Roll No 1</td>
<td>700</td>
</tr>
<tr id="4444">
<td>Roll No 11</td>
<td>800</td>
</tr>
<tr id="4444">
<td>Roll No 11</td>
<td>900</td>
</tr>
<tr id="7676">
<td>Roll No 12</td>
<td>800</td>
</tr>
<tr id="7676">
<td>Roll No 12</td>
<td>900</td>
</tr>
</table>

То, что я хочу. Каждые 2 <tr> имеют одинаковые id Но эти идентификаторы - динамические c. Я хочу, чтобы <tr> с одинаковым id получал другой background-color. Теперь в этой таблице использовано 3 ids. Таким образом, может быть 3 разных цвета.

Я применил много кодов jquery, но не смог. Пожалуйста, помогите мне

Answer 1

Как насчет этого?

const used_ids = []
$( "tr" ).each(function( index ) {
    const id = $(this).attr.('id')
    if (!used_ids.includes(id)) {
        // If the id has not been met before, add it to the array.
        used_ids.push(id)
        }
    // Get index of id from array of used ids
    const index = used_ids.indexOf(id)

    // If index is an even number, set background colour to grey, otherwise white
    if (index%2 === 0) $(this).css('background-color', 'white');
    else $(this).css('background-color', 'grey');
})

Он строит массив уникальных id s, затем присваивает белый цвет тем, у кого четный индекс в массиве, и серый цвет нечетным индексам.

Answer 2

Я разработал Dynami c набор цветов на основе идентификатора строки таблицы и надеюсь, что это решит вашу проблему. Ссылка на код

var table = document.getElementsByTagName("table")[0];
var secondRow = table.rows[1];
var count=0;
var trid =[];
var clr =[];
for(var i=0;i<table.rows.length;i++)
{
trid.push(table.rows[i].id);
}
var uniqueArray = [];
for(i=0; i < trid.length; i++){
    if(uniqueArray.indexOf(trid[i]) === -1) {
        uniqueArray.push(trid[i]);
    }
}
for(var i = 0; i < uniqueArray.length; i++)
{
    clr.push('#'+Math.floor(Math.random()*16777215).toString(16));
}


  for (var i = 0; i < table.rows.length; i++) {
  for(var j = 0; j < uniqueArray.length; j++)
{
if(table.rows[i].id ==uniqueArray[j]){
  table.rows[i].style.backgroundColor = clr[j];
  }
  }
}

Answer 3

Hi Используйте цикл в Jquery, l oop через каждый tr и определите его идентификатор, затем примените цвет bg

$( "tr" ).each(function( index ) {
  var ID = $(this)..attr('id');
  if(ID == '2221')
  {
     $(this).css('background-color', 'red');
  }
  else  if(ID == '2223')
  {
     $(this).css('background-color', 'blue');
  }

});