0

我有一个表格模板，该模板由服务器以 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>

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

问题在于编辑和删除功能。我希望在单击编辑/删除时选择行的数据（漫画名称、状态）。到目前为止，我一直在将名称设置为锚标签的标题属性，并通过 jquery att() 将其提取出来。

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

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

4

3 回答 3

1

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

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

在此处提供与您的描述匹配的示例：http: //editor.datatables.net/release/DataTables/extras/Editor/examples/inlineControls.html

于 2012-10-04T18:34:15.283 回答
1

瑞凯诗，

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>在 a<tr>中但不在 a<td>中可能不是一个好主意。不确定浏览器将如何处理这个问题，我猜这个元素至少在某些浏览器中是不可寻址的。

于 2012-10-04T19:06:47.997 回答
0

我将标题放在数据属性中<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>
于 2012-10-04T19:04:11.460 回答