<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <div class="container" style="margin-left:500px"> </br> <div class="col-3 col-lg-3 col-md-12 col-sm-12 col-12 mb-2"> <button class="form-control form-control-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <h7 id="" class="ui-button-text" style="font-size:10px;"> <div class="row"> <div class="col-4 col-lg-4"></div> <div class="col-4 col-lg-4" id="threeColumnCaption"> </div> <div class="col-4 col-lg-4 vButton" >v</div> </div> </h7> </button> <input type="hidden" id="threeColumnCaptionHidden" name="" class="" value="" /> <div class="dropdown-menu tableDiv" aria-labelledby="dropdownMenuButton" > <table id="threeCellTable" class="table" style="font-size:10px;"> <thead> <tr> <th>Id</th> <th colspan="2">Name</th> <th>Count</th> </tr> </thead> <tbody> <tr class="twoCell" style="padding-top:0px;padding-bottom:0px;" id="1 s" onclick="threeCellTableFunc(1,'Tomato',5)"> <td style=" padding-top:4px;padding-bottom:4px;" id="busingKodu">1</td> <td style=" padding-top:4px;padding-bottom:4px;" id="busingTanimi" colspan="2">Tomato</td> <td style=" padding-top:4px;padding-bottom:4px;" id="busingAkimi">5</td> </tr> <tr class="fillerCell" style="padding-top:0px;padding-bottom:0px;" id="2 s" onclick="threeCellTableFunc(2,'Potato',6)"> <td style=" padding-top:4px;padding-bottom:4px;" id="busingKodu">2</td> <td style=" padding-top:4px;padding-bottom:4px;" id="busingTanimi" colspan="2">Potato</td> <td style=" padding-top:4px;padding-bottom:4px;" id="busingAkimi">6</td> </tr> </tbody> </table> </div> </div> </div> <div style="margin-left:550px"> <br> <span>Got a problem? Send me a mail</span> <br> <span style="text-align:center;">utkuudemr@gmail.com</span> </div>

.twoCell { background-color: blue; color: white; } .twoCell:hover{ opacity:0.7; } .clearCell { background-color: white; } .fillerCell{ } .tableDiv { width:400px; height:200px; overflow-y:scroll; } table tbody tr:hover{ opacity:0.5; } .vButton{ text-align:right; font-weight:bold; }

function threeCellTableFunc(kod,tanim,akim) { debugger; var text = kod + "-" + tanim + "-" + akim; kodPatched = kod + " s"; var asas = document.getElementById(kodPatched); if (asas === null || asas === undefined) { document.getElementById('threeColumnCaption').innerHTML = ""; document.getElementById('threeColumnCaptionHidden').value = ""; } else { var classes = "" + asas.className; var table = document.getElementById('threeCellTable'); for (var i = 0; i < table.rows.length; i++) { var reg = new RegExp('(\\s|^)' + 'twoCell' + '(\\s|$)'); document.getElementById('threeCellTable').rows[i].className = document.getElementById('threeCellTable').rows[i].className.replace(reg, 'clearCell'); var asdsad = document.getElementById(kodPatched).className; document.getElementById(kodPatched).className = "twoCell"; var asdsaad = document.getElementById(kodPatched).className; document.getElementById('threeColumnCaption').innerHTML = text; document.getElementById('threeColumnCaptionHidden').value = text; } } }