Альтернатива Jeditable для редактируемых ячеек таблицы - PullRequest
Новая
       8

Альтернатива Jeditable для редактируемых ячеек таблицы

0 голосов
/ 09 марта 2011

Я пытался использовать Jeditable, чтобы сделать мою HTML-таблицу редактируемой. Однако после долгих исследований я обнаружил, что очень трудно (если не невозможно без бэкэнда) проверить входные данные.

Я действительно предпочел бы НЕ использовать какой-либо плагин и просто написать / использовать немного Javascript, который сделает ячейки редактируемыми и позволит мне присоединить jQuery Validator к входным данным. Данные никогда не будут переданы в бэкэнд (вернутся к значениям по умолчанию при обновлении страницы), поэтому решение не должно быть сложным ... будет использовать только HTML и Javascript.

Проблема с большинством фрагментов кода, которые я обнаружил с помощью Google, заключается в том, что они застряли, когда вы щелкаете внутри ячейки, и нажатие за пределами ячейки не сохраняет / отправляет изменение.

Есть ли у кого-нибудь фрагмент, который он успешно использовал и / или имеет опыт использования фрагмента с Validator?

1 Ответ

2 голосов
/ 09 марта 2011

Ну, согласно информации, которую я получил в вашем другом вопросе , вы можете изменить эту функцию на: 

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
         }
     }
 }

, когда ваш HTML выглядит так: 

<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>

Как вы могли видеть, я полагаюсь на свойство firstChild, однако оно может быть опасным, например, когда ваш HTML выглядит так: 

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

, тогда по крайней мере FF возвращает <TextNode textContent=" "> как firstChild.Чтобы не зависеть от этой проблемы, вы можете пойти с: 

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

PS.Все, что я написал, было основано на информации, полученной из другого вопроса, если что-то не так - прокомментируйте, и я постараюсь измениться;)

...