Alternative to Jeditable for editable table cells

Question

I have been trying to use Jeditable to make my html table editable. However upon much research I found that it is very difficult (if not impossible without a backend) to validate the input.

I really would prefer NOT to use any sort of plugin and simply write/use a bit of Javascript that would make cells editable and allow me to attach jQuery Validator to the input. The data will never get submitted to a backend (will return to default on page refresh) so the solution doesn't need to be complex...will only be using html and Javascript.

The problem with most code snippets I have found using Google is that they seem to get stuck when you click inside a cell and clicking outside the cell doesn't save/submit the change.

Does anyone have a snippet they have used successfully and/or experience using a snippet with Validator?

Answer 1

Well, according to information I got in your another question , you can change that function to:

function appendTable(id)
 {
     var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
     var i = 0;
     var rows = tbody.rows;
     for (var r = 0; r < 4; r++) {
         var row = rows[r];
         for (var c = 0; c < 4; c++) {
             var cell = row.cells[c];
             cell.firstChild.value = subset[i++]; // the only part changed
         }
     }
 }

when your html looks like:

<table id="alphabetTable" border="1">
    <thead>
        <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type = "text" size="1" /></td>
            <td><input type = "text" size="1" /></td>
            <td><input type = "text" size="1" /></td>
            <td><input type = "text" size="1" /></td>
        </tr>
        <tr>
            <td><input type = "text" size="1" /></td>
            <td><input type = "text" size="1" /></td>
            <td><input type = "text" size="1" /></td>
            <td><input type = "text" size="1" /></td>
        </tr>
        <tr>
            <td><input type = "text" size="1" /></td>
            <td><input type = "text" size="1" /></td>
            <td><input type = "text" size="1" /></td>
            <td><input type = "text" size="1" /></td>
        </tr>
    </tbody>
</table>

As you could see, I rely on firstChild property, however it can be dangerous, eg when your html looks like:

<td> <input type = "text" size=1 /> </td>

then at least FF returns <TextNode textContent=" "> as firstChild. Not to depend on this issue you can go with:

cell.getElementsByTagName("input")[0].value = subset[i++]; 

PS. All I wrote was based on info I got from another question, if something wrong - comment and I will try to change ;)