Показать / Скрыть строки таблицы с помощью классов Javascript

Ну один из способов сделать это было бы просто поместить класс в" родительские " строки и удалить все идентификаторы и встроенные onclick атрибуты:

<table id="products">
    <thead>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Destination</th>
        <th>Updated on</th>
    </tr>
    </thead>
    <tbody>
    <tr class="parent">
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr>
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr>
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
    ...etc.
    </tbody>
</table>

а затем есть CSS, который скрывает всех не-родителей:

tbody tr {
    display : none;          // default is hidden
}
tr.parent {
    display : table-row;     // parents are shown
}
tr.open {
    display : table-row;     // class to be given to "open" child rows
}

это значительно упрощает ваш html. Обратите внимание, что я добавил <thead> и <tbody> в разметку, чтобы сделать его легко скрыть строки данных и игнорировать строки заголовка.

С jQuery вы можете просто сделать это:

// when an anchor in the table is clicked
$("#products").on("click","a",function(e) {
    // prevent default behaviour
    e.preventDefault();
    // find all the following TR elements up to the next "parent"
    // and toggle their "open" class
    $(this).closest("tr").nextUntil(".parent").toggleClass("open");
});

демо: http://jsfiddle.net/CBLWS/1/

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

document.getElementById("products").addEventListener("click", function(e) {
    // if clicked item is an anchor
    if (e.target.tagName === "A") {
        e.preventDefault();
        // get reference to anchor's parent TR
        var row = e.target.parentNode.parentNode;
        // loop through all of the following TRs until the next parent is found
        while ((row = nextTr(row)) && !/\bparent\b/.test(row.className))
            toggle_it(row);
    }
});

function nextTr(row) {
    // find next sibling that is an element (skip text nodes, etc.)
    while ((row = row.nextSibling) && row.nodeType != 1);
    return row;
}

function toggle_it(item){ 
     if (/\bopen\b/.test(item.className))       // if item already has the class
         item.className = item.className.replace(/\bopen\b/," "); // remove it
     else                                       // otherwise
         item.className += " open";             // add it
}

демо:http://jsfiddle.net/CBLWS/

в любом случае, поместите JavaScript в <script> элемент, который находится в конце тела, так что он запускается после того, как таблица была проанализирована.

JQuery 10.1.2 имеет хорошие функции show и hide, которые инкапсулируют поведение, о котором вы говорите. Это избавит вас от необходимости писать новую функцию или отслеживать классы CSS.

$("tr1").show();

$("tr1").hide();

w3cschool ссылка на jQuery показать и скрыть

event.preventDefault()

не работает во всех браузерах. Вместо этого вы можете вернуть false в событии OnClick.

onClick="toggle_it('tr1');toggle_it('tr2'); return false;">

не уверен, что это лучший способ, но я тестировал в IE, FF и Chrome и работал нормально.

ниже мой скрипт, который показывает / скрывает строку таблицы с идентификатором "agencyrow".

<script type="text/javascript">

                        function showhiderow() {
                            if (document.getElementById("<%=RadioButton1.ClientID %>").checked == true) {

                                document.getElementById("agencyrow").style.display = '';
                            } else {

                                document.getElementById("agencyrow").style.display = 'none';
                            }


                        }
    </script> 

просто вызов функции showhiderow()по радиокнопкой onClick событие

директивы AngularJS ng-show, ng-hide позволяют отображать и скрывать строку:

   <tr ng-show="rw.isExpanded">
   </tr>

строка будет видна, когда rw.isExpanded = = true и скрыто, когда РВ.isExpanded = = false. ng-hide выполняет ту же задачу, но требует обратного условия.