使用输入字段代替 List.js 中的 td、h3、o 值

Question

在 List.js 网站上，他们展示了如何使用表格，甚至在 http://www.listjs.com/examples/table 上提供了示例。

<tr>
    <td class="name">Jonny Stromberg</td>
    <td class="born">1986</td>
</tr>

但是，我想改用输入值。

<tr>
    <input class="name" value="Jonny Stromberg">
    <input class="born" value="1986">
</tr>

结果出乎意料，输入值呈现为空。但是，最终目标是为输入值命名并在会话中保存 columns/rows。有人坐过同一条船吗？

Answer 1

尝试将 <input> 包裹在 <td></td> 标签中。您已正确设置 <inputs> 标签的 value，因此它们应该正确填充。

像这样的东西对我来说很好用：

<table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td><input class="name" value="Jonny Stromberg"></td>
        <td><input class="born" value="1986"></td>
      </tr>
      <tr>
        <td><input class="name" value="Jonas Arnklint"></td>
        <td><input class="born" value="1985"></td>
      </tr>
      <tr>
        <td><input class="name" value="Martina Elm"></td>
        <td><input class="born" value="1986"></td>
      </tr>
      <tr>
        <td><input class="name" value="Gustaf Lindqvist"></td>
        <td><input class="born" value="1983"></td>
      </tr>
    </tbody>
</table>

JSFiddle - https://jsfiddle.net/oLbey91h/1/

Answer 2

我能够使用输入字段并填充值属性来获得预期的结果。这是一个 Pastebin：http://pastebin.com/dEfjdNCi.

请注意，在 "options" 中，class 名称指向属性 "value."

<div id="users">
    <table>
        <!-- IMPORTANT, class="list" have to be at tbody -->
        <tbody class="list">
        <tr>
            <td style="display:none;"><input class="id" type="hidden"></td>
            <td><input class="name"></td>
            <td><input class="born"></td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function () {
        var options = {
            valueNames: [
                {attr: 'value', name: 'id'},
                {attr: 'value', name: 'name'},
                {attr: 'value', name: 'born'},
            ]
        };
</script>

使用输入字段代替 List.js 中的 td、h3、o 值

Using input fields instead of td, h3, o values in List.js

laravel

laravel-5

listjs