Question

我有一个表模板，它由服务器以JSON格式发送的数据填充。模板的代码如下：

<table id="mangeDataTable" class="tablesorter">

            <thead>
                <tr>
                    <th >S.No</th>
                    <th >Manga</th>
                    <th >Status</th>
                    <th > Edit</th>
                    <th> Delete</th>

             </tr>
            </thead>
            <tbody>
            <% for (var i = 0; i < mangaData.length; i++) { %> <% var item =mangaData[i]; %>
            <% var count=i%>

                <tr>
                <td><%= ++count%></td>
                <td><%= item.text%></td>
                <td><%= item.status%></td>
                <input id="mangaName" type="hidden" name="text" value="<%= item.text%>"/>
                <td><a href="#edit-box"  class="edit-window" title="<%= item.text%>" >Edit</a></td>
                <td><a href="#delete-box"  class="delete-window" title="<%= item.text%>" >Delete</a></td>

            </tr>
             <% } %>
             </tbody>
        </table>

使用上面的模板，我可以创建一个如下图所示的表格： MangaDatatable

问题在于编辑＆amp;删除功能。我希望在点击编辑/删除时选择行的数据（漫画名称，状态）。到目前为止，我一直将名称设置为锚标记的title属性，并通过jquery att（）提取它。

var mangaName=$(this).attr("title");

但这不是做事的方式。这只是我选择的临时解决方案。有关如何做的任何建议吗？

Answer 1

由于您已经在使用jQuery，我建议您使用datatables插件来显示和编辑您的数据。它的设置和使用相对容易。

主页：http://datatables.net/examples/

使用与您的说明匹配的示例： http://editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html

Answer 2

Rikesh，

jQuery的.closest()是你最好的朋友。

$('#mangeDataTable').on('click', '.edit-window', function(){
    var row = $(this).closest('tr');
    var mangaName = row.find('td').eq(1).text();
    //then do whatever is necessary to edit
}).on('click', '.delete-window', function(){
    var row = $(this).closest('tr');
    var mangaName = row.find('td').eq(1).text();
    //then do whatever is necessary to delete
});

<input>内但<tr>内的浮动<td>可能不是一个好主意。不确定浏览器将如何处理这个问题，而且我猜这个元素至少在某些浏览器中是不可替代的。

Answer 3

我将标题放在<tr>上的数据属性中，然后closest找到它。您的HTML模板如下所示：

<tr data-title="<%= item.text %>">
    <!--...-->
</tr>

然后您的编辑和删除处理程序可以找到如下标题：

var title = $(this).closest('tr').data('title');
// Or even $(this).closest('[data-title]').data('title') for more future-proofing

然后，您可以将编辑和删除链接上的title属性用于其预期目的（即，向用户提供有关链接功能的一些额外信息）：

<td>
    <a ... title="Edit <%= item.text%>">Edit</a>
</td>
<td>
    <a ... title="Delete <%= item.text%>" >Delete</a>
</td>

Jquery从动态表中挑选元素

3 个答案: