我希望能够单击表格中的一行并编辑该特定行。我的目标是将其打开成可编辑的形式。我似乎无法在表单中输出行。我尝试了一些不同的东西。我在codepen上进行了基本设置。如何让它在页面叠加层和表单中显示特定的行？我尝试将其插入输入中，但这并不起作用。
我是否需要以不同方式调用$（＆＃34; .rowEditData＆＃34;）来分隔每列，如果是这样，我该怎么做？
function openOverlay(){
document.getElementById("pageOverlay").style.visibility = "visible";
}
function closeOverlay(){
document.getElementById("pageOverlay").style.visibility = "hidden";
}
// show row data to be edited or view single row
$(".rowEditData").click(function(index){
triggerEditOverlay();
});
//popup overlay function for editing row
function triggerEditOverlay(){
// Clear the div
/*here you were using a ; after .html() not showing the rest of your 'form'*/
$("#pageOverlay").empty();
html = "<div id='editableTableDiv'>" + $(".rowEditData").html() + "<input type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' value='Close' onclick='closeOverlay()'></div>";
$("#pageOverlay").html(html);
// open div overlay
openOverlay();
} // end popup overlay fn#pageOverlay {visibility: hidden; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.25); z-index: 99;}
#pageOverlay div {padding: 1%; width: 30%; height:80%; margin: 100px; margin-left:35%; background-color: rgb(255,255,255);}<link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageOverlay"></div>
<table id="dataTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp dataTable no-footer" role="grid">
<thead>
<tr role="row">
<th class="mdl-data-table__cell--non-numeric sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Shape Name: activate to sort column descending" style="width: 401px;">Shape Name</th>
<th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Number Edges: activate to sort column ascending" style="width: 436px;">Number Edges</th>
<th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Sum of Interior Angles: activate to sort column ascending" style="width: 638px;">Sum of Interior Angles</th>
</tr>
</thead>
<tbody>
<tr class="rowEditData odd" value="7924" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Hexagon</td>
<td class="mdl-data-table__cell--non-numeric">6</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7923" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">6</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7930" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">3</td>
<td class="mdl-data-table__cell--non-numeric">180</td>
</tr>
<tr class="rowEditData even" value="7931" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">360</td>
</tr>
<tr class="rowEditData odd" value="7932" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">5</td>
<td class="mdl-data-table__cell--non-numeric">540</td>
</tr>
<tr class="rowEditData even" value="7933" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">6</td>
<td class="mdl-data-table__cell--non-numeric">120</td>
</tr>
<tr class="rowEditData odd" value="7934" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">10</td>
<td class="mdl-data-table__cell--non-numeric">1440</td>
</tr>
<tr class="rowEditData even" value="7925" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Octagon</td>
<td class="mdl-data-table__cell--non-numeric">8</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7922" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">pentagon</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7926" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Pentagon</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7920" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">square</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7927" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Square</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7928" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Square</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7921" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">trapezoid</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7919" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">triangle</td>
<td class="mdl-data-table__cell--non-numeric">3</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7929" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Triangle</td>
<td class="mdl-data-table__cell--non-numeric">3</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
</tbody>
</table>
答案 0 :(得分：1)
您需要使用this或$(this)来引用所点击的元素。使用$(".rowEditData").html()只会使用第一场比赛。我还减少了以下代码，删除了内联事件处理程序并使用事件委托来执行关闭/隐藏功能。
// show row data to be edited or view single row
$(".rowEditData").click(function() {
html = "<div id='editableTableDiv'>" + $(this).html() + "<input type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' value='Close'></div>";
$("#pageOverlay").html(html).show();
});
$(document).on('click', '#editableTableDiv input', function() {
$("#pageOverlay").hide();
})#pageOverlay {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.25);
z-index: 99;
}
#pageOverlay div {
padding: 1%;
width: 30%;
height: 80%;
margin: 100px;
margin-left: 35%;
background-color: rgb(255, 255, 255);
}<link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageOverlay"></div>
<table id="dataTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp dataTable no-footer" role="grid">
<thead>
<tr role="row">
<th class="mdl-data-table__cell--non-numeric sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Shape Name: activate to sort column descending" style="width: 401px;">Shape Name</th>
<th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Number Edges: activate to sort column ascending" style="width: 436px;">Number Edges</th>
<th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Sum of Interior Angles: activate to sort column ascending" style="width: 638px;">Sum of Interior Angles</th>
</tr>
</thead>
<tbody>
<tr class="rowEditData odd" value="7924" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Hexagon</td>
<td class="mdl-data-table__cell--non-numeric">6</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7923" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">6</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7930" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">3</td>
<td class="mdl-data-table__cell--non-numeric">180</td>
</tr>
<tr class="rowEditData even" value="7931" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">360</td>
</tr>
<tr class="rowEditData odd" value="7932" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">5</td>
<td class="mdl-data-table__cell--non-numeric">540</td>
</tr>
<tr class="rowEditData even" value="7933" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">6</td>
<td class="mdl-data-table__cell--non-numeric">120</td>
</tr>
<tr class="rowEditData odd" value="7934" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">null</td>
<td class="mdl-data-table__cell--non-numeric">10</td>
<td class="mdl-data-table__cell--non-numeric">1440</td>
</tr>
<tr class="rowEditData even" value="7925" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Octagon</td>
<td class="mdl-data-table__cell--non-numeric">8</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7922" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">pentagon</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7926" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Pentagon</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7920" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">square</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7927" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Square</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7928" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Square</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7921" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">trapezoid</td>
<td class="mdl-data-table__cell--non-numeric">4</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData odd" value="7919" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">triangle</td>
<td class="mdl-data-table__cell--non-numeric">3</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
<tr class="rowEditData even" value="7929" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Triangle</td>
<td class="mdl-data-table__cell--non-numeric">3</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
</tbody>
</table>