Table Connection JQuery
by jairajdesai
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="message">
</div>
<input type="submit" id="add_conn" value="Add This Connection" />
<div id="one">
<table border="1">
<tr>
<td>Pera</td>
<td>Lozac</td>
<td>11</td>
</tr>
<tr>
<td>Mika</td>
<td>Mikic</td>
<td>22</td>
</tr>
<tr>
<td>Zika</td>
<td>Zivac</td>
<td>33</td>
</tr>
<tr>
<td>Dezurni</td>
<td>Krivac</td>
<td>44</td>
</tr>
</table>
</div>
<div id="two">
<table border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
CSS
#one {
position: absolute;
top: 10%;
left: 1%;
}
#two {
position: absolute;
top: 10%;
right: 35%;
}
table {
overflow: hidden;
}
tr{
background-color:#ffffff;
}
td {
padding: 10px;
position: relative;
outline: 0;
}
body:not(.nohover) tbody tr:hover {
background-color: #ffa;
}
.selected-bg-red {
background-color: red;
}
.selected-bg-green {
background-color: green;
}
JavaScript
$(document).ready(function() {
var temp_color = getRandomColor();
$('tr').on('click', function() {
current_background = $(this).css('background-color');
$(this).toggleClass('selected');
if ($(this).hasClass('selected')) {
$(this).css('background-color', temp_color);
} else {
$(this).css('background-color', '#fff');
}
});
$('#add_conn').on('click',function(){
var left = "";
var right = "";
$('tr').filter(function() {
var match = 'rgb(255,255,255)';
var this_element = $(this).css('background-color');
if(hexc(this_element) != hexc(match) ){
$(this).find('td').each(function(){
console.log($(this).text());
});
}
console.log( );
})
});
});
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function hexc(colorval) {
var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
delete(parts[0]);
for (var i = 1; i <= 3; ++i) {
parts[i] = parseInt(parts[i]).toString(16);
if (parts[i].length == 1) parts[i] = '0' + parts[i];
}
color = '#' + parts.join('');
return color;
}