title: How can I merge table cells with same content in Knockoutjs?
body: <p>I am trying to create table with Knockoutjs. I want to merge table cells if the value of a propety of the cells is the same. I can't figure out how to do this.</p>
  
  <p>I have the following code</p>
  
  <pre><code>&lt;table id="EventTracker"&gt; &lt;tbody data-bind="template: { name: 'person-template', foreach: Person}"&gt;&lt;/tbody&gt;&lt;/table&gt;
  &lt;script type="text/html" id="person-template"&gt;
      &lt;tr&gt;&lt;td data-bind="text: Name"&gt;&lt;/td&gt;&lt;!-- ko template: { name: 'event-template', foreach: event }--&gt; &lt;!-- /ko --&gt; &lt;/tr&gt; 
  &lt;/script&gt;
  
  &lt;script type="text/html" id="event-template"&gt;
      &lt;td data-bind="text: Label"&gt;&lt;/td&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The table is created fine. However I don't want individual cells displayed if the contents are the same in each. If the event that is being used to create the td is the same as the prior one I want to increase the colspan of the cell by 1. Effectively not creating an individual cell but merging them. E.g. If I have 3 cells with the same text they should merge and create a single td with a colspan of 3. I don't know how to code that in Knockoutjs.</p>
  
  <p>Any ideas?</p>