console
buyer={"name":"Alyssa Cusenza","mobile":"+16192498801","tel":"+16192498801","country":"United States","countryCn":"美国","province":"Armed Forces Europe","city":"FPO","address":"PSC 903 box 20168","zipcode":"09859","receiptAddressCountry":"US","platformUserInfo":{"email":"acusenza1@yahoo.com"}}
a1= ['21227 US Hwy 19 N 163 c', 'Clearwater', 'FL', '33765','United States'];
$('body').append(getAddrModifyHtml(buyer,a1));
function getAddrModifyHtml(buyer,a1){
return `<div id="addr_dlg">
<div>错误:<span style="color:red;">收件人邮编格式不正确</span></div>
<div>谷歌地图:<span style="color:darkorange;">21227 US Hwy 19 N 163 c, Clearwater, FL 33765</span></div>
<table style="border-collapse: collapse;text-align:center;">
<tr><th></th><th>原地址</th><th>AI纠正</th><th>操作</th></tr>
${getAddrTableHtml(buyer,a1)}
</table>
</div>`;
function getAddrTableHtml(buyer,a1){
let a0=['address','city','province','zipcode','country'].map(k=>buyer[k]);
// a1= ['21227 US Hwy 19 N 163 c', 'Clearwater', 'FL', '33765','United States'];
let col1=['地址','城市','省/州','邮编','国家'];
let attr=['address','city','state','zipcode','country'];
let rowArr=[];
for(let i=0,len=a0.length;i<len;i++){
let isSame=a0[i].toLowerCase()===a1[i].toLowerCase();
let accept=`<a href="javascript:void(0);" style="text-decoration:none;" accept>接受</a>`;
rowArr.push(`<tr>
<td style="background-color:lightgray;">${col1[i]}</td>
<td>${a0[i]}</td>
<td style="color:${isSame?'gray':'darkorange'};">${a1[i]}</td>
<td data-type="${attr[i]}"><span class="ns_edit"></span> ${isSame?'':accept}</td>
</tr>`);
}
return rowArr.join('');
}
}
$('body').on('click','span.ns_edit,a[accept]',e=>{
let $el=$(e.target);
let type=$el.parent().attr('data-type');
let val;
if($el.is('.ns_edit')){
val=prompt(`请输入要修改${type}的值:`);
if(!val) return;
}else{
val=$el.parent().prev().text();
}
console.log(type,val);
})
<div></div>
#addr_dlg>*{margin-top: 10px;}
#addr_dlg th,td{border:solid 1px gray;padding: 4px 10px;}
#addr_dlg th{background-color:lightgray;font-size:14px;font-weight:normal;}
#addr_dlg td:last-child{text-align: left;}
.ns_edit::after{content:'';display:inline-block;width:16px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="DodgerBlue" width="16" height="16" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>')}