- 通过点击 全部保存 触发:遍历所有 保存 按钮
- 并获取到指定的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("全部保存成功")
});
网友评论