title: Row within a row with JSON
body: <p>I have a webpage where it shows the lists of Projects and the monitoring of its progress/finances for every quarter. As shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/uNqjg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uNqjg.png" alt="Figure One"></a></p>
  
  <p>As you can see, my table is comprises of Project Name and a lists of sub-title's underneath it. And a series of columns per each quarter. Thru <code>PHP</code> I was able to populate the list of sub-titles under the Project Name, which also being fetched from the server side. Here's the code: <br /></p>
  
  <pre><code>          $sql = mysqli_query($con," My SELECT Statement ");
            $i=0;
            while($row = mysqli_fetch_assoc($sql)){
              $ptitle  = $row['Title'];
              $iname   = $row['Item'];
  
            if($i%1)
              {
              ?&gt;
              &lt;?php } else { ?&gt;
              &lt;tr&gt;
              &lt;?php } ?&gt;
              &lt;td width="25%"&gt;&lt;?php echo $ptitle; ?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;td&gt;&lt;?php echo "&lt;ul style='list-style-type: none;'&gt;&lt;li&gt;".nl2br($iname)."&lt;/li&gt;&lt;/ul&gt;"; ?&gt;&lt;/td&gt;
              &lt;td contenteditable="true" name="v1"&gt;&lt;/td&gt;
  </code></pre>
  
  <p><strong>Note:</strong> ptitle = ProjectName and iname = Semi-title underneath the Project's name. <br /></p>
  
  <p>Now, as you can see, the Project Name column literally <em>"conquer"</em> a single row on the left. Yet, the rows under the column of each quarter, should have its own separately, and must be parallel to the every sub-title underneath the Project Name. (Please refer to the image above for this) the only problem am encountering is... <em>how can I make an editable row from inside a row, without affecting mysqli result?</em> coz basically my table right now is kinda look like this: <br /></p>
  
  <p><a href="https://i.stack.imgur.com/3199s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3199s.png" alt="Figure Two"></a></p>
  
  <p>Anyone who's more experience on this? I need your help.
  <br /></p>
  
  <p><strong>PS:</strong> ...and oh! You might be wondering why do I include <code>JSON</code> in the title? It is because, I originally use <code>JSON</code> for editing those table rows before I even use <code>mysqli_fetch_array</code>. But when I include the results of the <code>array</code> inside the <code>&lt;table&gt;</code> tag, everything's changed and <code>JSON</code> is no longer working. So as of now, I am force to do it manually, meaning typing each <code>&lt;td contenteditable=true&gt;</code> in all of those rows. Yet, its not the desired output since I need another row within an existing row. Ideas? Anyone?</p>
  
  <p>Figure Two:</p>
  
  <p><a href="https://i.stack.imgur.com/7STkD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7STkD.png" alt="Figure Two"></a></p>
  
  <p>Figure Three:</p>
  
  <p><a href="https://i.stack.imgur.com/KKdTY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KKdTY.png" alt="Figure Three"></a></p>