title: how to get table rows from ajax table in partial view in asp.net mvc
body: <p>in my partial view  i have a foreach loop to show up a table  </p>
  
  <p>like this</p>
  
  <pre><code> &lt;table id="tableid"&gt;
      &lt;thead&gt;
  &lt;tr&gt;
      &lt;th&gt;column1&lt;/th&gt;
      &lt;th&gt;column2&lt;/th&gt;
      &lt;th&gt;column3&lt;/th&gt;
  &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      foreach(mymodel item in ineumerable&lt;mymodel&gt;)
      {
      &lt;tr onclick=getdetails(this)&gt;&lt;td&gt;@item.coloumn1value&lt;/td&gt;
      &lt;td&gt;@item.coloumn2value&lt;/td&gt;
      &lt;td&gt;@item.coloumn3value&lt;/td&gt;&lt;/tr&gt;
      }
  </code></pre>
  
  <p>this is in a  partial view inside a view which i am populating with ajax call </p>
  
  <p>now  in my .js  -  i have to get the a dom element with rows so that i can make the whole table a json result and send it controller action again to show up but </p>
  
  <p>when doing  <code>doucment.all.tableid.rows[]</code> - its rows are always 0 . 
  so not able to get the row wise information and do some manupulation and send it to controller </p>
  
  <p>1st qs - is there any way to get the rows of this table  ??</p>
  
  <p><code>doucment.all.tableid.innerHTML</code> has the whole data like  </p>
  
  <p><code>'\n&lt;thead&gt; coulmn1 \r\n\r\n .......&lt;/tbody&gt;</code> with all data</p>
  
  <p>and <code>doucment.all.tableid.outerHTML</code> has the whole data with  tag</p>
  
  <p>now how to make this to a dom element or how to make it a jsonobject or complex object so that i cn manupulate each row and send this whole table as a object to controller </p>
  
  <p>when i click on any row  , another partial view load in the bottom page with all three text boxes with each property of that single row  and a button called save </p>
  
  <pre><code> @Html.TextBoxFor(m =&gt; m.coloumn1value)
  
   @Html.TextBoxFor(m =&gt; m.coloumn2value)
  
   @Html.TextBoxFor(m =&gt; m.coloumn3value)
   &lt;input type="button" value="save" onclick="savechanges()"&gt;
  </code></pre>
  
  <p>here they can edit it and if they click on the button save it will immediately show up in the above table </p>
  
  <p>Now in my parent view 
  there are are two divs  </p>
  
  
  
  
  
  
  
  <p>table placeholder is getting populated by an ajax call like this  </p>
  
  <pre><code>var details = {
              _ID: ID,
  
          }
          $.ajax({
              url: "/MyController/GetTheTableForThisID",
              type: "POST",
              dataType: "html",
              data: details,
              success: function (data) {
                  $('#tablePlaceHolder').html(data);
  
              }
          });
  </code></pre>
  
  <p>where ID i am getting from preious page and _ID is model property</p>
  
  <pre><code>  public PartialViewResult GetTheTableForThisID(MyModel model)
  {
  
          //loading the values in Ienumerable of this class to ietrate
  
  return PartialView("tablepartialviewname",model)   ;
  
   }
  </code></pre>
  
  <p>when clicking in each row i am loading one row as ajax call </p>
  
  <pre><code>var details = {
   _rowID         
  }
  $.ajax({
      url: "/MyController/GetDetailsForOneRow",
      type: "POST",
      dataType: "html",
      data: details,
      success: function (data) {
          $('#editOneRowPlaceHolder').html(data);
  
      }
  });
  </code></pre>
  
  <p>in my controller its hiting </p>
  
  <pre><code>public partialViewresult GetDetailsForOneRow(MyModel model)
  {
  
     model._rowID =//doing some manupulation and getting all the three values 
  
  return PartialView("partialViewforOneRowDetails",model)
  
  }
  </code></pre>