记录文本框内容的动态变化

<table border="1" cellspacing="0" cellpadding="2">
<tr>
<td>Data1</td>
<td><input type="text" value="123" /></td>
<td>Data2</td>
<td><input type="text" value="124" /></td>
</tr>
<tr>
<td>Data3</td>
<td><input type="text" value="125"/></td>
<td>Data4</td>
<td><input type="text" value="126" /></td>
</tr>
<input type="checkbox" value="1" name="sel"/>123
<input type="checkbox" value="2" name="sel"/>456
<input type="checkbox" value="3" name="sel"/>789
<input type="checkbox" value="4" name="sel" />753
</table>
<button onclick="sel()">提交</button>

这个是对文本框值改变的记录
var obj={};
var arr1=[];//得到焦点时存放原始值
var arr2=[];//失去焦点时存放改变之后的值
var arr3=[];//得到焦点时存放修改的那个地方
$('input[type=text]').on('focus',function(){
arr1.push($(this).val());
arr3.push($(this).parent().prev().text());
});

$('input[type=text]').on('blur',function(){
arr2.push($(this).val());
});

$('button').on('click',function(){
for(var i=0;i< arr1.length;i++){
//判断这个地方是否被修改过
if(!obj[arr3[i]]){
obj[arr3[i]] = {'key':arr3[i],'first':arr1[i],'laster':arr2[i]};
}else{
//如果修改过，则存放最终的修改值
obj[arr3[i]]['laster'] = arr2[i];
};
};
var arr=[];
//将上面合成的对象再转化为数组，便于遍历显示想要的结果
for(var item in obj){
arr.push(obj[item])
};
var str='';
for(var i=0;i<arr.length;i++){
if(arr[i].first!=arr[i].laster){
str+=arr[i].key+'值的变化为：'+arr[i].first+'——'+arr[i].laster+',';
}
};
console.log(str);
})

这个是对复选框改变时的记录
var names=document.getElementsByName('sel');
var arr6=[];//先前选中的
var arr7=[];//先前未选中的
for(var i=0;i<names.length;i++){
if(names[i].checked){
arr6.push(names[i].value)
}else{
arr7.push(names[i].value)
}
}
//改变之后的复选框状况
var arr4=[];//后来选中的
var arr5=[];//后来未选中的
var str1='';
function sel(){
for(var i=0;i<names.length;i++){
if(names[i].checked){
arr4.push(names[i].value)
}else{
arr5.push(names[i].value)
}
}
str1+='先前选中的值是：'+arr6+','+'先前未选中的值是：'+arr7+'后来选中的值是：'+arr4+','+'后来未选中的值是：'+arr5;
console.log(str1)
}