Как установить идентификатор строки [TR] и идентификатор столбца [TD] в displaytag?

Question

Я использую Displaytag для отображения DataGrid.Теперь мне нужно изменить цвет строк на основе некоторых вычислений.Как если

значение столбца3 + столбец4 > coulmn5, тогда цвет строки должен быть желтым

значение столбца3 + столбец4 < coulmn5, тогда цвет строки должен быть красным

значение столбца3 + столбец4 = coulmn5, тогда цвет строки должен быть белым

Я думаю, что единственный способ сделать это - использовать getElementByID() метод

Примечание:я не хочу рассматривать решение, используя getElementsByTagName()[index] , причина в том, что позже порядок столбцов может измениться.

в настоящее время я использую следующий код, который хочу изменить.

var rows = tbody.getElementsByTagName("tr");

Перебрать объект строк

var tdObj = rows[i].getElementsByTagName("td")[3]  

Answer 1

Во-первых, я не верю, что можно установить идентификаторы td или tr в displaytag без изменения источника.Мой список дел еще не исчерпан, но сейчас у меня есть для вас обходной путь.

Вместо определения таблицы:

<display:table id='row' name="..." export="true" requestURI="">
  <display:column property="usefulData" title="Useful data" sortable="true" />
  ... more columns ...
</display:table>

сделай это:

<display:table id='row' name="..." export="true" requestURI="">
  <display:column title="Useful data" sortable="true" >
    <span id='${row.usefulData}' class='css_class_selector'>${row.usefulData}</span>
  </display:column>
</display:table>

Обратите внимание на диапазон, обертывающий печатные данные.Теперь вы можете выбрать данные, относящиеся к печати, внутри вашей таблицы, что, вероятно, вам и нужно;чтобы выбрать ваши данные, а не специально выбирать td и tr.

Answer 2

Идентификатор был бы одним из способов сделать это.Другой вариант — установить класс для каждого td (чтобы вы могли повторно использовать один и тот же класс в каждой строке).Затем вы перебираете ячейки в поисках ячейки с правильным именем класса.Если хотите, вы можете абстрагировать это в функцию getElementsByClassName.

Способ сделать это с меньшим количеством разметки — сохранить поиск от столбца к индексу и использовать его для получения номера столбца вместо перебора ячеек в каждой строке.Вы можете получить эту информацию из классов в заголовке или col элементы.например.:

<script type="text/javascript">
    function check(table) {
        // Work out which column is at which index
        //
        var columns= {};
        var ths= table.tHead.rows[0].cells;
        for (var i= ths.length; i-->0;)
            if (ths[i].className.indexOf('column-')==0)
                columns[ths[i].className.substring(7)]= i;

        // Check each row
        //
        var rows= table.tBodies[0].rows;
        for (var i= rows.length; i-->0;) {
            var cells= rows[i].cells;
            var a= +cells[columns.a].innerHTML;
            var b= +cells[columns.b].innerHTML;
            var sum= +cells[columns.sum].innerHTML;
            var right= a+b==sum;
            rows[i].className= right? 'right' : 'wrong';
        }
    }
</script>

<style>
    .right { background: green; }
    .wrong { background: red; }
</style>

<table id="t">
    <thead>
        <tr>
            <th class="column-a">A</th>
            <th class="column-b">B</th>
            <th class="column-sum">Sum</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

<button onclick="check(document.getElementById('t'));">Check</button>

Обратите внимание, используя innerHTML получить текстовое содержимое немного неудобно, но для чисел это работает нормально, поскольку они не могут содержать специальные символы HTML.Для произвольного текста вам понадобится функция extract-text-content.

С использованием rows/cells предпочтительнее getElementsByTagName.Это быстрее, проще для чтения, и вам не придется беспокоиться о вложенных таблицах.