1

I have a text-box under footable class. I want to edit this this text box but not working in mobile.

On mobile keypad appear when I click on text box but after a second keypad disappears automatically.

Here is the HTML syntax

<th data-class="expand">Runs</th>
Ex-iT
  • 1,479
  • 2
  • 12
  • 20
user3472237
  • 11
  • 3

1 Answers1

0

[Footable now supports it starting from 2.0.3]

Footable as such does not support form input elements properly. In our project we had multiple pages which required editing and I have made changes to the footable code to enable editing. You can try with the following it also includes the documentation:

https://github.com/bradvin/FooTable/pull/285

By default it should work for any input elements but if it is a dynamic content then you can specify the data-editable attribute to true in "th" for the column.

Here is how it works, it creates a data variable for every td with unique id and binds it to the row and its details and detach the contents from row to detail and vice versa based on the visibility.

Row

<tr class="footable-detail-show" style="display: table-row;">
    ....
    <td style="display: none;" data-bind-name="bind-1413864326707-4"></td>
    ....
</tr>

Details

<tr class="footable-row-detail">
    ....
        <div class="footable-row-detail-value" data-bind-value="bind-1413864326707-4">
            <input id="abc" type="text" value="200">
        </div>
    .....
</tr>

For it to work it expects footable is initialized after the table contains all the data (Not required when data-editable="true") and any changes made are strictly on the input elements based on say id or the elements selector and not based on the td selector. Say for example changes to #abc are preserved but if you make changes to

<td style="display: none;" data-bind-name="bind-1413864326707-4">

they might get lost.

Check the demo

http://jsfiddle.net/habeebhassan/1adjnygs/

Habeeb Hassan Syed
  • 54
  • 4