前端:遍历所有按钮并得到指定值和发送ajax请求

  • 通过点击 全部保存 触发:遍历所有 保存 按钮
  • 并获取到指定的td内容
  • 和发生ajax请求

html代码

<div class="box">
  <div class="serch">
    <button class="btn btn-default" id="all_save" style="margin-left: 15%;">全部保存</button>
    <button class="btn btn-default" style="margin-left: 3%;" onclick="window.location.href='/work/{{file_id}}/downloads/'">导出</button>
  </div>
  <div class="box" id="content">
    <table id="history_income_list">
      <tr class="active">
        <th>句段</th>
        <th class="yuanwen">原文栏</th>
        <th>状态</th>
        <th class="yiwen">译文栏</th>
        <th>MT选择</th>
        <th>保存</th>
      </tr>
      {% for f,y in wenjian %}
      <tr data-uid={{forloop.counter}}>
          <td>{{forloop.counter}}</td>
          <td id="yuanwen" class="yuanwen" name="yuanwen" style="text-align: left;">{{f.yuanwen}}</td>
          <td>√</td>
          <td id="yiwen" class="yiwen" style="text-align: left;">
              <div class="textarea" id="yiwen_show"  contenteditable="true">{{y.yiwen}}</div>
          </td>
          <td>
             <a href="javascript:void(0);" id="click">百度翻译</a>
             <a href="javascript:void(0);" id="g{{forloop.counter}}">搜狗翻译</a>
          </td>
          <td><input type="submit" value="保存" class="submit"></td>
        </tr>
        {% endfor %}
       </table>
      </div>
    </div>

JS代码

$('#all_save').click(function(){
        var tab = document.getElementById("history_income_list"); //找到这个表格
        var rows = tab.rows; //取得这个table下的所有行
        for(var i=1;i<rows.length;i++){
            // 循环获取所有行指定的td内容
            var yi = rows[i].cells[4].innerText;
            var y_id = rows[i].cells[2].innerText;
            // console.log(y_id, yi);
            console.log("开始发送ajax请求")
            $.ajax({
                url: '/work/all_change_yiwen/'+y_id+"/"+yi+"/",
                method: "POST",
                dataType: "json",
                data: {"csrfmiddlewaretoken": "{{ csrf_token }}"},
                success: function (data) {
                    console.log(data.msg);
                } 
            });      
        }
        alert("全部保存成功")
    });
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,375评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 11,011评论 0 106
  • 此人花重金从阴森森的鬼屋中买了一小撮心。因为他的心越来越小了,必须吃些新生儿的嫩心才能维持生命。 他在一个月前发现...
    章士元阅读 3,550评论 8 3
  • 事件,今天老公编辑课程宣传,一直在讨论费用包括什么不包括什么,应该怎么写。一直跟我确认。 感受,烦, 想法,这么点...
    f814176e5cc0阅读 1,841评论 0 1

友情链接更多精彩内容