javascript - Hiding set of html table rows on a button click -

I am working on an ASP.Net MVC application in which I have an html table that displays in data groups. Group in the name using foreach loop in JS . Now I want to apply a hide and show button on each product name that enables the user to hide and view data related to that product using the button.

Now the following image shows that put my table webpage has gone.

The above picture has heavy, sweet, sour my products which are highlighted and have some lines of data that should be hidden on it. Click a button.

I used the following script to cover my data in the HTML table

  & lt ;! - Forrest: Product Horizontal - & gt; & Lt; TR & gt; & Lt; Td class = "clientproductHeader" data-bind = "text: $ data" & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = "submit" class = "btn btn-danger customerproduct header" value = "hide" & gt; & Lt; / Td> & Lt; Td class = "client product header" colspan = "13" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; Tbody Data-Bind = "foreach: Co: Ossebel Array ($ Root Datanpromficolol ()) ExtendStastic ('Product') Index Product () [$ Data]" & gt; & Lt; TR & gt; & Lt; Td data-bound = "text: grade" & gt; & Lt; / Td> & Lt; Td data-bind = "text: term" & gt; & Lt; / Td> & Lt; Td data-bind = "text: pipeline" & gt; & Lt; / Td> & Lt; Td data-bind = "text: index" & gt; & Lt; / Td> & Lt; Td data-bound = "text: bead3" & gt; & Lt; / Td> & Lt; Td data-bound = "text: bd2" & gt; & Lt; / Td> & Lt; Td data-bound = "text: bid1" & gt; & Lt; / Td> & Lt; Td data-bound = "text: as 1" & gt; & Lt; / Td> & Lt; Td data-bind = "text: es 2" & gt; & Lt; / Td> & Lt; Td data-bind = "text: ask3" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; -! / Ko - & gt;  

My visual model as the answer

  var Canadian CrudeView Model = function (Canadian context) {var self = this; Self.productshorizontal = ko.observableArray (); ---- -------- self.productshorizontal = ko.computed (function () {var product horizontal = code.aeremap (co.obsubayrarre (swindapatypeintigital)). Extendsdistinct ('product') ( ), Function (item) {Return item.product;}) Coo.Titles.GetDistrictVolicies (ProductsHyjontal);}, this); ProductViewModel = function (name) {this.name = name; This.isRelatedDataVisible = ko.observable (); } Function RootViewModel (Data) {var productModels = data.map (function (name) {new productview model (name);}); This.productshorizontal = ko.observableArray (Product Model); This.toggleReleatedDataVisible = function (prod) {prod.isRelatedDataVisible (; prod.isRelatedDataVisible ()); }}  

and HTML asfollows

  & lt ;! - Fortecha: Product Horizontal - & gt; & Lt; TR & gt; & Lt; Td class = "clientproductHeader" data-bind = "text: name" & gt; & Lt; / Td> & Lt; Td> & Lt; Input type = "button" class = "btn btn-hazard clientproductHeader" data-bind = "click: togglereal datadisabled" & gt; & Lt; / Td> & Lt; Td class = "client product header" colspan = "13" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt ;! - ko if: isRelatedDataVisible - & gt; & Lt; Tbody Data-Bind = "foreach: Co: Ossebel Array ($ Root Datanpromficolol ()) ExtendStastic ('Product') Index Product () [$ Data]" & gt; .... & lt; / Tbody & gt; & Lt ;! - / ko - & gt; & Lt ;! - / ko - & gt;  

but this issue is in the JavaScript console, he threw me an exception

  error: the comment tag can not be closed to match: Ko if: isRelatedDataVisible  

Be sure that

Combined binding with:

The rows you want to hide / should be visible, they should share the visible object with a sample. Whenever a user clicks on a button (the button must be click-bound), it can mean the value of the rows that make it visible.

You can get ideas in this

  & lt; Tbody data-bound = "foreach: people" & gt; & Lt; Tr data-bind = "visible: $ parent.hideArray.indexOf (myParent) == -1" & gt; & Lt; Td data-bind = "text: name" & gt; & Lt; / Td> & Lt; Td data-bind = "text: alias" & gt; & Lt; / Td> & Lt; TD & gt; & Lt; Button Data-Bind = "Visible:! MyPant, click: $ parent.showHide, text: button text" & gt; & Lt; / Button & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt;