Can JQuery mobile show single active row hit by navigation slider - jquery-mobile

Question

Can jquery mobile support such feature:
let's say there is a grid like 2 rows x 2 columns, it is shown as:
<table>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<td>ID1</td>
<td>Name1</td>
</tr>
<tr>
<td>ID2</td>
<td>Name2</td>
</tr>
</table>
ID, NAME
ID1, NAME#1
ID2, NAME2
, now I expect the grid is shown single row every time and there is a navigation slider to locate which row will be shown, i.e. let's move navigation slider to row 2, then row #2 will be shown in same effects as below codes (all columns are shown in rows):
<table>
<tr>
<td>ID :</td>
<td>ID1</td>
</tr>
<tr>
<td>Name :</td>
<td>Name#1</td>
</tr>
</table>
now for single row, it looks like:
ID: ID1
NAME: NAME1
, with a mobile device when user want to edit a row of a grid, the space is too small, I want to change to show selected row only and change layout of a record from landscape to portrait. After user finished editing, we can click another button to restore layout to HTML table style (multiple rows)
Have jQuery mobile provides such feature?

Answer 1

jQuery Mobile does not provide this functionality out-of-the-box. You would have to code it yourself. You might consider another option which is to add an edit button to each row of the table. Then when the user clicks the edit button, launch a jQM popup with the edit controls.
For each row in the table, add a cell with a button:
<tr>
<td class="editBtn">No text
</td>
<td>ID1</td>
<td>Name1</td>
</tr>
Add your edit form to the page same level as (header, footer, content):
<div data-role="popup" id="popupEdit" data-theme="a" class="ui-corner-all" data-dismissible="false">
<div class="ui-content">
<p>You are editing the row with ID: <strong id="editRow"></strong>
</p>
<hr />
<label for="txtID">ID:</label>
<input type="text" name="txtID" id="txtID" value="" />
<label for="txtName">Name:</label>
<input type="text" name="txtName" id="txtName" value="" />
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="button" value="OK" data-theme="b" class="popupbutton" />
</div>
<div class="ui-block-b">
<input type="button" value="Cancel" data-theme="a" class="popupbutton" />
</div>
</fieldset>
</div>
</div>
Add a click handler for the row edit button:
$("#MyTable .editBtn a").on("click", function () {
//get row id
var rowid = $(this).jqmData("rowid");
$("#editRow").text(rowid);
var $rowCells = $(this).closest("tr").find("td");
var curID = $rowCells.eq(1).text();
var curName = $rowCells.eq(2).text();
$("#txtID").val(curID);
$("#txtName").val(curName);
$("#popupEdit").popup("open");
});
In my example, and getting a rowid from a data-attribute, and the current ID and Name from the other row cells. These values are transferred to the popup and then the popup is launched.
DEMO
NOTE: you need to add the code that actually save the values depending on your database/backend server/localstorage/etc.