使用jQuery和ajax的表中的可编辑列

时间:2013-05-27 07:18:17

标签: javascript jquery html ajax

我有一个静态表,想要更新数据。这是我想要实现的示例:http://jsfiddle.net/xBB5x/63/

我尝试了完全相同的脚本,但它仍然无效。

这些是我导入的脚本:

<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/twitterbootstrap/2.2.1/js/bootstrap.min.js"></script>
<script type='text/javascript' src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script type='text/javascript' src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>


<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitterbootstrap/2.2.1/css/bootstrap-combined.min.css">  
<link rel="stylesheet" type="text/css" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">    

这是Javascript:

$('#users a').editable({
    type: 'text',
    name: 'username',
    url: '/post',
    title: 'Enter username'
});

//ajax emulation
$.mockjax({
    url: '/post',
    responseTime: 200
}); 

HTML代码:

<p>X-editable: create editable column in table.<br>
 As pk is unique in each row, you should put it in data-pk attribute.  
</p>
<div style="margin: 150px">
    <table id="users" class="table table-bordered table-condensed">
        <tr><th>#</th><th>name</th><th>age</th></tr>
        <tr>
            <td>1</td>
            <td><a href="#" data-pk="1">Mike</a></td>
            <td>21</td>       
        </tr>

        <tr>
            <td>2</td>
            <td><a href="#" data-pk="2">John</a></td>
            <td>28</td>       
        </tr>        

        <tr>
            <td>3</td>
            <td><a href="#" data-pk="3">Mary</a></td>
            <td>24</td>       
        </tr>        

    </table>    
</div>

尝试使用相同的代码,但不显示jsfiddle如何做到这一点!对此有何帮助?

0 个答案:

没有答案