django js 实现表格动态标序号的实例代码

django js 实现表格动态标序号

<table class="table table-striped">
        <thead>
        <tr class="key_words_head">
          <th>序号</th>
          <th>类目</th>
          <th>关键词</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody id="key_words_body">
        {% for keywords in classify_keywords_obj %}
          <tr class="key_words_tbody">
            <td id="td_num"></td>
            <td id="hide_id">{{ keywords.id }}</td>
            <td id="td_classify">{{ keywords.classify.classify_name }}</td>
            <td id="td_keywords">{{ keywords.keywords }}</td>
            <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="show_change_model('{{ keywords.id }}')">编辑</a>
              <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" style="color: red" onclick="del_settings('{{ keywords.id }}',this)">删除</a></td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
<script>
    function xu_hao() {
      var oTable = $('tr.key_words_tbody').length;
      for (var i = 0; i < oTable + 1; i++) {
        $('tr.key_words_tbody').eq(i).children("td#td_num").empty();
        $('tr.key_words_tbody').eq(i).children("td#td_num").append(i + 1);
      }
    }
  </script>

总结

以上所述是小编给大家介绍的django js 实现表格动态标序号的实例代码 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • django 在原有表格添加或删除字段的实例

    一.如果models.py文件为时: timestamp = models.DateTimeField('保存日期') 会提示: (env8) D:\Desktop\env8\Scripts\mysite>python manage.py makemigrations You are trying to add a non-nullable field 'timestamp' to article without a defa ult; we can't do that (the databas

  • django js 实现表格动态标序号的实例代码

    django js 实现表格动态标序号 <table class="table table-striped"> <thead> <tr class="key_words_head"> <th>序号</th> <th>类目</th> <th>关键词</th> <th>操作</th> </tr> </thead> &

  • django echarts饼图数据动态加载的实例

    如下所示: 后台关键代码: data = {} #keys与values分别为该数据的键数组,值的数组.这里循环为字典添加对应键值 for k, v in zip(keys, values): data.update({k: v, },) #最后将数据打包成json格式以字典的方式传送到前端 return render(request, 'index.html', {'data': json.dumps(data)}) 网页(js中)取值关键代码: 1.取值: var kv = new Arra

  • 使用 Node.js 实现图片的动态裁切及算法实例代码详解

    背景&概览 目前常见的图床服务都会有图片动态裁切的功能,主要的应用场景用以为各种终端和业务形态输出合适尺寸的图片. 一张动辄以 MB 为计量单位的原始大图,通常不会只设置一下显示尺寸就直接输出到终端中,因为体积太大加载体验会很差,除了影响加载速度还会增加终端设备的内存占用.所以要想在各种终端下都能保证图片质量的同时又确保输出合适的尺寸,那么此时就需要根据图片 URL 来对原始图片进行裁切,然后动态生成并输出一张新的图片. URL 的设计 图片 URL 需要包含图片 id.尺寸.质量等信息.有两种

  • bootstrap table表格插件之服务器端分页实例代码

    Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头.单复选.排序.分页.搜索以及自定义表头等功能. 因公司的项目需要实现用户管理的表格实现,所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台. 示例截图: 客户端代码: //引入的css文件 <link href="../public/static/css/bootstrap.min.css" rel="external nofo

  • 表格展示利器 Bootstrap Table实例代码

    表格展示利器 Bootstrap Table实例代码

    1.Bootstrap Bable 全部数据导出分析 在表格导出数据中,发现设置了分页参数,导出的数据仅为表格加载的分页参数数据,于是,针对这样的情况,通过设置分页参数的值,使表格可以加载更多的数据,可达到导出所有数据的功能需求.然而,在实际的实验中,发现此方案存在以下问题: 表格一次加载一千条数据时,网页响应速度太慢,加载数据等待时间严重过长.(一分钟左右) Bootsrtap Table 的文件导出是纯前端的js导出模式,它的数据源只能为表格中的数据集合 分析产生上述问题的原因,不难发现,h

  • JS获取和修改元素样式的实例代码

    1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style

  • jQuery动态增减行的实例代码解析(推荐)

    jQuery动态增减行的实例代码解析(推荐)

    先给大家展示下效果图: 这是没有增加时的界面: 增加后的界面: 删除后的界面: 原因分析: 不擅长jquery和JavaScript 场景: 代码如下: <table class="table table-bordered"> <thead> <tr> <th style="width: 10px">輪次</th> <th style="width: 100%">比賽時間&l

  • jQuery实现可编辑表格并生成json结果(实例代码)

    jQuery实现可编辑表格并生成json结果(实例代码)

    实现效果如下,在编辑表格的同时可以实现字段json内容的自动变化,点击提交可以保存到后台,页面加载的时候自动解析json并加载表格内容.该代码解析和加载功能都用前端js实现,简化了后台代码逻辑. 定义要操作的表格头: <input readonly="readonly" class="form-control" type="text" id="scorerange" value="" name=&qu

  • iOS中创建表格类视图WBDataGridView的实例代码

    iOS中创建表格类视图WBDataGridView的实例代码

    项目中创建表格, 引用头文件 #import "WBDataGridView.h" - (void)viewDidLoad{ [superviewDidLoad]; // Do any additional setup after loading the view. self.view.backgroundColor = [UIColorwhiteColor]; CGFloat margin = 10.f; CGFloat width = self.view.frame.size.wi

  • 用原生JS对AJAX做简单封装的实例代码

    首先,我们需要xhr对象.这对我们来说不难,封装成一个函数. var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest(); } catch (e2) { window.alert("您的浏览器不支持ajax,请

随机推荐