Выделите определенные строки таблицы при нажатии значения столбца.нужна помощь по javascript - PullRequest
Новая
       49

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

0 голосов
/ 20 февраля 2012

Есть ли способ выбрать определенные строки таблицы в качестве переменной, а затем изменить их стиль. Например -: 

     <a onclick="hl(this)">1,2,5</a>

     <table>
     <tr>
     <tr> <td>.....</td></tr>
     <tr> <td>.....</td></tr>
     <tr> <td>.....</td></tr>
     <tr> <td>.....</td></tr>
     </tr>
     </table>

Теперь, что делает функция hl, когда я нажимаю на нее, строки 1,2 и 5 должны быть выделены. Что я думал о том, что если так или иначе есть, я могу использовать какой-то выбор для строк, предоставляя индекс как 

     var m=table.rowIndex[1]

или что-то, а затем делает 

     m.style.background="something"

тогда это может сработать, но я понятия не имею, что делать, поэтому, пожалуйста, помогите!

Ответы [ 4 ]

1 голос
/ 20 февраля 2012

Если вы хотите передать номера строк как содержимое тега: 

<script>
    function hl(el){

        arr = (el.innerHTML).split(",")

        var t = document.getElementById("tbl")
        for(var i=0; i<arr.length; i++){
            t.rows[arr[i]].style.backgroundColor  ="yellow";
        }
        return false;
    }
</script>

и html 

<table id="tbl">
    <tr ><td >row 1</td></tr>
    <tr><td>row 2</td></tr>
    <tr><td>row 3</td></tr>
    <tr><td>row 4</td></tr>
</table>
<a href="#" onclick="hl(this)">1,2,3</a>

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

js 

function regEvents(){
    trs = document.getElementsByTagName("tr");
    for (var i=0; i<trs.length;i++){
        trs[i].onclick = hilite;
    }
}
function hilite(){
this.style.background = "yellow";
}

html 

<table id="tbl">
    <tr ><td >row 1</td></tr>
    <tr><td>row 2</td></tr>
    <tr><td>row 3</td></tr>
    <tr><td>row 4</td></tr>
</table>

и после загрузки вашего домена связывайте события - поместите это в конец html-файла 

<script>
regEvents();
</script>
0 голосов
/ 20 февраля 2012

Гораздо лучше дать вашим функциям осмысленные имена.Кроме того, не используйте элемент A, когда кнопка или другой элемент больше подходит (например, стилизованный диапазон).А предназначены для навигации (якоря и ссылки), а не для ведения дел.

Вот пример того, что вы пытаетесь сделать с помощью rowIdex.Удаление и добавление выделения можно поместить в один и тот же цикл, или вы можете вспомнить предыдущие выделенные строки в закрытии, чтобы сделать его немного более эффективным.

Но если вы работаете с менее чем 100строк (или, возможно, намного больше), это не будет иметь никакого значения для воспринимаемой производительности. 

<script>
function hilightRows(id, rowindexes) {
  var table = document.getElementById(id);
  var rows;

  if (table && rowindexes) {

    // Remove any current highlighting
    for (var j=0, jLen = table.rows.length; j < jLen; j++) {
      table.rows[j].style.backgroundColor = '';
    } 

    // Add new highlighting
    for (var i=0, iLen = rowindexes.length; i<iLen; i++) {
      table.rows[rowindexes[i]].style.backgroundColor = 'red';
    }
  }
}
</script>


<button onclick="hilightRows('t0', [1,2,5])">1, 2, 5</button>       
<button onclick="hilightRows('t0', [3,0])">3, 0</button>       
<button onclick="hilightRows('t0', [])">Remove highlight</button>       

<table id="t0">
  <tr><td>.....
  <tr><td>.....
  <tr><td>.....
  <tr><td>.....
  <tr><td>.....
  <tr><td>.....
  <tr><td>.....
</table>
0 голосов
/ 20 февраля 2012

Как говорит Линч ... jquery, особенно функция index ().

И вот оно (просто общая идея) 

$('#thingtobeclicked').click(function()
{
   $('.selected').removeClass('selected');
   $(this).data('indices').each(function(i){
     $('#myTable tr:nth-child(i)').addClass('selected');
   });
});

Надеюсь, это кому-нибудь поможет или вернет мне 2 повторения ...:)

Я забыл сказать: для того, чтобы эта работа работала, вы устанавливаете индексы, которые должны быть выбраны в поле данных объекта, который нужно щелкнуть, как в: 

<a href='#' id='thingtobeclicked' data-indices='1,3,5'></a>
<table id='myTable'>...
0 голосов
/ 20 февраля 2012

В вашем примере разметки элемент table является следующим братом после элемента a. Если это действительно так, то: 

function hl(anchor) {
    var table = hl.nextSibling;
    while (table && table.nodeName.toUpperCase() !== "TABLE") {
        table = table.nextSibling;
    }
    if (table) {
        var rows = table.getElementsByTagName('tr');
        rows[0].className += " highlighted";
        rows[1].className += " highlighted";
        rows[4].className += " highlighted";
    }
}

... где класс «выделенный» применяет стили выбора. Это предполагает, что нет вложенных таблиц.

Больше чтения:

FWIW, если вы еще не используете его, я бы рекомендовал использовать хорошую библиотеку JavaScript, такую ​​как jQuery , Прототип , YUI , Закрытие или любой из нескольких других . Они сглаживают различия между браузерами и предоставляют множество полезных функций.

...