jqueryをクリックして個別にテーブル行を表示する方法

Question

テーブル内の行をクリックして、その特定の行を編集できるようにします。私の目標は、編集可能なフォームに開いておくことです。フォームに行を出力するようには思えません。私はいくつかのことを試しました。私はcodepenに基本的なセットアップをここに持っています。ページオーバーレイとフォーム内の特定の行を表示するにはどうすればよいですか？私はそれを入力に挿入しようとしましたが、うまくいきません。

各列を区切るために$（ "。rowEditData"）を別々に呼び出す必要がありますか？その場合、どうすれば正確に行えますか？

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>

Answer 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>