SOURCE

console 命令行工具 X clear

                    
>
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>')}

本项目引用的自定义外部资源