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

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

作者: 慢半帧 | 来源:发表于2019-01-04 22:42 被阅读0次
  • 通过点击 全部保存 触发:遍历所有 保存 按钮
  • 并获取到指定的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("全部保存成功")
    });

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/uldlrqtx.html