美文网首页
前端:遍历所有按钮并得到指定值和发送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