Javascript 在标记内的onclick函数中将映射作为参数发送_Javascript_Jquery

Javascript 在标记内的onclick函数中将映射作为参数发送

javascript jquery

Javascript 在标记内的onclick函数中将映射作为参数发送,javascript,jquery,Javascript,Jquery,出于某些原因。。。在我们的项目中，每当搜索数据列表时，我们都会重新绘制页面。当我们单击表格行中的第四列时，该行中的数据需要显示在新的模式/弹出窗口中。我试图通过在映射中保存每个变量，将行上显示的数据发送到模式窗口。但是，onclick函数似乎无法识别这一点，devtools返回一个意外的标识符语法错误这是我正在做的一个例子在我的jsp文件上 <script> // After receiving name, userId, userNumber by Ajax, let

出于某些原因。。。在我们的项目中，每当搜索数据列表时，我们都会重新绘制页面。当我们单击表格行中的第四列时，该行中的数据需要显示在新的模式/弹出窗口中。我试图通过在映射中保存每个变量，将行上显示的数据发送到模式窗口。但是，onclick函数似乎无法识别这一点，devtools返回一个意外的标识符语法错误

这是我正在做的一个例子

在我的jsp文件上

<script>
// After receiving name, userId, userNumber by Ajax,    

let thisMap = new Map();
thisMap.set("NAME", name);
thisMap.set("USERID", userId);
thisMap.set("PHONE", userNumber);

let insertTable = "<tbody>"
insertTable += "<td><div class='tIn'>"+name+"</div></td>";
insertTable += "<td><div class='tIn'>"+userId+"</div></td>";
insertTable += "<td><div class='tIn'>"+userPhone+"</div></td>";
insertTable += "<td><div class='tIn' id='openDetail'>";
insertTable += "<a style='cursor: pointer;'onclick='openModal("+thisMap+");'>";

$("#thisTable").html(insertTable);

function openModal(mapData){
   $("#userNameHere").val(mapData.get('USERNAME'));
   $("#userIdHere").val(mapData.get('USERID'));
   $("#userPhoneHere").val(mapData.get('PHONE'));
   
   showModal("thisModal"); // lets say this is a function the shows the below hidden modal
}
</script>

<body>
   // LIST TABLE
   <div id="thisTable" class="thisTable">

   // MODAL
   <div class="modal-container" id="requestDetail">
   <div class="modal-wrapper">
   <div class="contentsArea">
       <ul>
           <li>
                <div>
                     <span>THIS NAME</span>
                     <div class="input">
                        <input type="text" id="userNameHere">
                     </div>
                </div>
           </li>
           <li>
                <div>
                     <span>THIS NAME</span>
                     <div class="input">
                        <input type="text" id="userIdHere">
                     </div>
                </div>
           </li>
              <li>
                <div>
                     <span>THIS NAME</span>
                     <div class="input">
                        <input type="text" id="userPhoneHere">
                     </div>
                </div>
           </li>
        </ul>
    </div>
    </div>
    </div> 
</body>


//通过Ajax接收名称、用户ID、用户编号后，
让thisMap=newmap（）；
thisMap.set（“NAME”，NAME）；
set（“USERID”，USERID）；
thisMap.set（“电话”，用户号码）；
let insertTable=“”
insertTable+=“”+名称+“”；
insertTable+=“”+userId+“”；
insertTable+=“”+userPhone+“”；
插入表+=“”；
插入表+=“”；
$（“#此表”）.html（插入表）；
函数OpenModel（mapData）{
$（“#userNameHere”）.val（mapData.get（'USERNAME'）；
$（“#userIdHere”）.val（mapData.get（'USERID'）；
$（“#userPhoneHere”）.val（mapData.get（'PHONE'）；
showModal（“thisModal”）；//假设这是一个函数，它显示了下面隐藏的模式
}
//列表表
//模态


这个名字


这个名字


这个名字

onclick内部标记是否不支持发送地图对象？还是我遗漏了什么？提前谢谢你

我真的看不出在你现在的情况下使用

地图有什么意义。以下将是我的工作方式

将来自AJAX调用的信息放入表中
使其在模式中可编辑

显然，这只能是完整功能的一部分。但也许它会给你一些如何进行的想法

const data=[{name:“Harry Potter”，userId:“potterh”，userNumber:“+999-123456”}，
{name:“Ron Weasley”，userId:“Weasler”，userNumber:“+999-456123”}，
{名称：“Hermiony Granger”，用户ID:“grangerh”，用户编号：“+999-112233”}]；
const tb=document.querySelector（#thisttable tbody”），
md=document.querySelector（“requestDetail”），inps=md.queryselectoral（“input”）；
md.style.display=“无”；
tb.innerHTML=
data.map（函数（d）{return”“+对象.值（d）.join（“”）
+"✎"})
.加入（“\n”）；
tb.onclick=function（ev，e，tr）{e=ev.target
if（如classList.contains（“编辑”））{
md.style.display=“”；
[].slice.call（例如，最近的（“tr”）.children，0.forEach(
函数（c，i）{inps[i]&&（inps[i].value=c.textContent）}）
}}
#requestDetail{位置：绝对；顶部：0px；左侧：300px}
tbody tr:n个子项（奇数）{背景色：#ddd}
#此表tr td:n子（4）{cursor:pointer}

NameUserIdPhone


用户名


用户Id


电话


这是@carsten的唯一一个经过编辑的答案，但我觉得对于新手来说，javascript需要更具可读性

您不需要Map
，为了简单易读，您更喜欢{}
。Map
s用于将对象作为键
主要错误是，打印时将thisMap
转换为字符串，并将该字符串传递给函数。如果查看HTML，您将看到

此外，只有tr
是tbody
的有效子级，tr
只能具有th
或td


const tableBody=document.querySelector（“thisttabletbody”）；
const modal=document.querySelector（“requestDetail”）；
常量输入={
名称：document.querySelector（“#name”），
userId:document.querySelector（“#userId”），
userNumber:document.querySelector（“#userNumber”），
};
函数追加行（行）{
rows.forEach（row=>{
const tr=document.createElement（'tr'）；
const name=document.createElement（'td'）；
name.textContent=row.name；
tr.appendChild（姓名）；
const userId=document.createElement（'td'）；
userId.textContent=row.userId；
tr.appendChild（userId）；
const userNumber=document.createElement（'td'）；
userNumber.textContent=row.userNumber；
tr.appendChild（userNumber）；
const edit=document.createElement（'td'）；
edit.title='edit'；
edit.className='edit'；
edit.textContent=✎';
edit.addEventListener（'click'，（）=>OpenModel（行））；
tr.appendChild（编辑）；
tableBody.appendChild（tr）；
});
}
函数openModal（obj）{
inputs.name.value=obj.name；
inputs.userId.value=obj.userId；
inputs.userNumber.value=obj.userNumber；
modal.style.display=''；
}
附录行([
{姓名：“哈利·波特”，用户名：“波特”，用户名：“+999-123456”}，
{name:“Ron Weasley”，userId:“Weasler”，userNumber:“+999-456123”}，
{name:“Hermiony Granger”，userId:“grangerh”，userNumber:“+999-112233”}，
])；
#requestDetail{位置：绝对；顶部：0px；左侧：300px}
tbody tr:n个子项（奇数）{背景色：#ddd}
#此表tr td:n子（4）{cursor:pointer}

名称
用户ID
电话


用户名