一個動態擴展表格控件列和行的 jQuery 插件

不過這並不影響使用鴨！

看這里：https://github.com/zhuwansu/table-ext.js 

一個簡單的示范

html

<table id="tableId">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性別</th>
                    <th>個人描述</th>
                    <th style="width: 80px;">操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
<div style="display:none">
        <table id="tableTrTemplate">
            <tbody>
                <tr>
                    <td><input name="name" /></td>
                    <td><select name="sex">
                            <option value="">保密</option>
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select></td>
                    <td><textarea name="description"></textarea></td>
                </tr>
            </tbody>
        </table>
    </div>

js

 var util = $(selector).tableUtil();
                util.rowHtml = $('#tableTrTemplate tbody').html();
                util.addRow();

 

寫了兩個示例

sample1-動態行 

sample2-動態列

 另外項目借此還實現了 jQuery Validate 、表頭控件一鍵同步到表體輸入控件。

表格控件 radio、checkbox 、span 都是支持的。

另外：1、為了使 表格可以被 form 提交，我把所有 控件的 name 都追加了行索引（這也解決了 radio、checkbox 的問題），然后將 name 緩存到 z-name 屬性中，你可以通過 attr('z-name') 獲取原 name。

2、在 加載數據行的時候，如果原數據中 id 那么在 調用 rows() 方法的時候可以獲取 id 噠噠噠，如果通過表單提交則需要自己搞一個 隱藏框。

后面有空再寫詳細點吧。

截圖：

行的自定義

表頭的自定義

 

如果要用的話，有任何問題歡迎來提😊。