如何使数据表背景图像可点击

时间:2013-06-21 05:39:06

标签: javascript jquery-ui jquery-datatables

我正在使用数据表,其中对于特定列,我需要将设置的背景图像作为可点击。

我无法把它放在一起。我可以为文本做到这一点,但可以弄清楚如何为backgorund图像完成它。谁能建议。

这是我的javascript->

$(document).ready(function(){
    var myArray=JSON.parse(document.getElementById("populateDT").innerHTML);
        $('#example').dataTable
        (
            {
                "sScrollY": "500px",
                "bPaginate": false,
                "bScrollCollapse": true,
                 aaData: myArray,

                "aoColumns":
                    [
                        { "mData": "Id"},
                        { "mData": "Label"},
                        { "mData": "CT"},
                        { "mData": "data"},
                        { "mData": "Updated"},
                        { "sClass": "center", "mData":"", "sDefaultContent": '<a href="" class="editor_save">"getimage"</a> '},
                        { "sClass": "editimage", "mData":"","sDefaultContent": '<a href="" class="editor_save">this</a> ' },
                        { "sClass": "deleteimage", "mData":""}
                    ]
            } );
    });

以下是我的HTML

<table class="display" id="example" cellpadding="0" cellspacing="0" border="0">
<thead>
<ul>
    <li> <a href="addedit.jsp">Add Code Edit</a></li>
    <li> <a href="#">Import</a></li>
    <li> <a href="#">Export</a></li>
</ul>
<tr>
    <th>Id</th>
    <th>Label</th>
    <th>CT</th>
    <th>data</th>
    <th>UpdatedAt</th>
    <th></th>
    <th></th>
    <th></th>
</tr>
</thead>

<tbody>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="getimage"></td>
    <td class="editimage"></td>
    <td class="deleteimage"></td>
</tr>
</tbody>
</table>

我想将getimage,editimage和deleteimage设为可点击。 我想了解这个链接http://editor.datatables.net/release/DataTables/extras/Editor/examples/envelope_inline.html 但需要一些帮助。欣赏它。感谢

http://jsfiddle.net/pratik24/bujfp/

1 个答案:

答案 0 :(得分:0)

以下是一个将更改背景颜色的示例:

$(document).ready(function(){
    //handle the click
    $('td',this).click(function() {
        $(this).css( "background-color", "red" );
    });
});

OR

$(document).ready(function(){
    //handle the click
    $('td',this).click(function() {
        $(this).addClass( "panama-red" );
    });
});

我建议使用.addClass而不是.css。