HTML + JavaScript：Javascriptでボタンをクリックしたときに行を強調表示するにはどうすればよいですか？

debugcn 投稿 Dev

アヌラグチャクラボルティ

以下のコードを使用して動的テーブルを生成しています-

<!DOCTYPE html>
<html>
<head>
    <script>
        document.write("<table id=appTable border=1 style=margin-top:10px; margin-left:10px;>");
        document.write("<tr><th>Select</th><th>Name</th><th>Location</th><th>Action</th></tr>");
        for (row = 1; row < 5; row++) {

            document.write("<tr>");

            for (col = 1; col <= 4; col++) {
                if(col == 1) {
                    document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' /></td>");
                }
                if(col == 2) {
                    document.write("<td width='140'>Name</td>");
                }
                if(col == 3) {
                    document.write("<td width='200'>Location</td>");
                }
                if(col == 4) {
                    document.write("<td><button type='button'>select</button></td>");
                }
            }

            document.write("</tr>")

        }

        document.write("</table>")
    </script>

</body>
</html>

選択ボタンをクリックすると、テーブルの行が行全体を強調表示するはずです。javascript＆でそれを実装する方法はありcssますか？

グルプラサドJラオ

どうぞ！ボタンのonclick作成中にボタンに関数を追加し、次のように関数を記述します。

デモ

したがって、追加する前にボタンのhtmlを変更すると次のようになります

document.write("<td><button type='button' onclick='highlight(this)'>select</button></td>")
                                          ^^^^^Add this

と機能

function highlight(ctrl){
   var parent=ctrl.parentNode.parentNode;
   parent.style.background='red';
}

更新

以下の他のクリックで以前に選択されたものを削除することは、あなたが選ぶことができるアプローチの1つです：

デモ

CSS

.backChange{
    background:red;
}

シナリオ1

function highlight(ctrl){
   var elements=document.getElementsByTagName('tr'); //get all the tr elements
   for(var i=0;i<elements.length;i++)
        elements[i].className=''; //clear the className from all the tr elements
   var parent=ctrl.parentNode.parentNode;
   parent.className="backChange"; //add ClassName to only this element's parent tr

}

シナリオ2

あなたが持っている場合今、classListそれはすでに存在しているtrとあなただけの追加や、特定の1削除したいclassのは変わりstyle、あなたが以下のようにそれを行うことができました：

デモ

function highlight(ctrl){
   var elements=document.getElementsByTagName('tr');
    for(var i=0;i<elements.length;i++)
        elements[i].classList.remove('backChange'); //remove one particular class from list of classNames in that element
   var parent=ctrl.parentNode.parentNode;
   parent.classList.add("backChange");//Add that particular class to classList of element's parent tr
}

更新2

クラスを使用して適用せずにinline styles、以下のように試すことができます。

デモ

function highlight(ctrl){
   var elements=document.getElementsByTagName('tr');
    for(var i=0;i<elements.length;i++)
        elements[i].style.background=''; //remove background color
   var parent=ctrl.parentNode.parentNode;
   parent.style.background="red";//add it to specific element.

}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]