Изменить цвет фона 1-го ряда в таблице - PullRequest
Новая
       24

Изменить цвет фона 1-го ряда в таблице

0 голосов
/ 04 мая 2011

Ниже моя таблица, которая заполняется набором данных spry

Вот мой набор данных 

var ds1 = new Spry.Data.XMLDataSet("/xml/data.xml", "rows/row");

Вот мой jquery внутри метода, который вызывается при нажатии кнопки 

function addRow()
{
var newRow = new Array();
var nextID = ds1.getRowCount(); 

newRow['ds_RowID'] = nextID; 
newRow['id'] = "x"; 
newRow['name'] = "Abhishek";
newRow['country'] = "India";


ds1.dataHash[newRow['ds_RowID']] = newRow; 
ds1.data.push(newRow); 

Spry.Data.updateRegion(ds1); 

ds1.sort('name','descending'); 
ds1.setCurrentRow(newRow.ds_RowID);

$(".trEven td").css("background-color", "red");
alert($.fn.jquery);

/*$("#tableDg tbody tr:first").css({
    "background-color": "red"
});*/
}

Вот мой стол 

<div id="cdiv" style="width:100%;" spry:region="ds1">
<table id="tableDg" 
    style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1"> 

    <thead>
     <tr id="trHead" style="color :#FFFFFF;background-color: #8EA4BB"> 
         <th width="2%"><input id="chkbHead" type='checkbox' /></th>
         <th width="10%" align="center" spry:sort="name"><b>Name</b></th> 
         <th width="22%" align="center" spry:sort="host"><b>Country</b></th> 

     </tr>
     </thead>

     <tbody spry:repeat="ds1">   
     <tr id="trOdd"   
     spry:if="({ds_RowNumber} % 2) != 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #FFFFFF" class="{ds_OddRow}"> 
         <td><input type="checkbox" id="chkbTest" class = "chkbCsm"></input></td>
         <td width="10%" align="center">&nbsp;&nbsp;{name}</td> 
         <td width="22%" align="center">&nbsp;&nbsp;{country}</td> 


     </tr> 

     <tr id="trEven" 
     spry:if="({ds_RowNumber} % 2) == 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #EDF1F5;" class="{ds_EvenRow}"> 
         <td><input type="checkbox" class = "chkbCsm"></input></td>
         <td id="tdname" width="10%" align="center">&nbsp;&nbsp;{name}</td> 
         <td width="22%" align="center">&nbsp;&nbsp;{country}</td> 

     </tr>
     </tbody>
     </table>
</div>

Я где-то ошибаюсь, пожалуйста, ведите меня.Спасибо:)

Ответы [ 3 ]

2 голосов
/ 04 мая 2011

Работает для me (jsFiddle) . Какие проблемы у вас возникают?

Если вы используете классы вместо идентификаторов, вы можете использовать что-то вроде следующего: 

$('.trEven').each(function() {
    $(this).css({"background-color": "red"});
});

См. Для справки: API jQuery - .each ()

2 голосов
/ 04 мая 2011

Если я правильно помню, <tr> только описывает структуру.<td> представляет визуальную часть таблицы.Или это то, как некоторые браузеры отображают их.

Поэтому $("#trEven td").css("background-color", "red") должно работать.И желательно, чтобы вы использовали классы вместо идентификаторов в таких случаях, когда может существовать несколько экземпляров.

1 голос
/ 04 мая 2011

Вы не должны использовать id s для нечетных и четных строк. id значения должны быть уникальными на странице.

Итак, я бы предложил: 

<tr class="trOdd"

и 

<tr class="trEven"

и затем: 

$(".trEven")

Если вы действительно хотите, чтобы первая строка в теле таблицы получала красный фон (в отличие от всех четных), тогда ваш селектор должен быть: 

$("#tableDg tbody tr:first")
...