table row selection

by Craig Martin

HTML

<button onclick="resetSelection()" id"reset">reset</button>
<table id="grid">
    <tr id="1" class="">
        <td>id 1</td>
        <td>name 1</td>
    </tr>
    <tr id="2">
        <td>id 2</td>
        <td>name 2</td>
    </tr>
</table>
<div id="out"></div>
<div id="out2"></div>

CSS

.merge {
    background-color: lime;
    transition: All .7s;
}
.norm {
    background-color: transparent;
    transition: All .7s;   
}
table {
    width: 100%;
}

JavaScript

function resetSelection() {
    document.getElementById("out").innerHTML = "";
    $("tr").removeClass("merge");
    };

$(document).ready(function () {
    $("tr").click(function () {
    });
    


$("tr").click(function () {  
    var prep = ($(this).text());
    var xcheck = $(".selectadded").find($(this).text());
    if ($(this).hasClass("merge")) {
        if (prep = xcheck){
            var removetarget = $(".selectadded").find($(this).text());
            removetarget.remove();
           // alert('prep = xcheck');
        }
    } 
    else if ($(this).not(".merge")) {
    $("#out").append(('<div class="selectadded">')+($(this).text())+('</div>'));
    $(this).toggleClass("merge"); 
       // alert('not merge');
    } else {
    $("#out").append(('<div class="selectadded">')+($(this).text())+('</div>'));
  //  $(this).toggleClass("merge"); 
                alert('else');
    } 
});
    
$("#sendselected2").click(function () {        
  $("tr").each(function () {
    if ($(this).hasClass("merge") ) {
         $("#out").append($(this).text());
        $(this).removeClass("merge");
    var x = ($(this).text());
    document.getElementById("out2").innerHTML = x;
        };         
    });
 }); 
    
$("#sendselected").click(function () {        
  $("tr").each(function () {
    if ($(this).hasClass("merge") ) {
         $("#out").append($(this).text());
        $(this).removeClass("merge");   
        };         
    });
 }); 
 
    
    
    
});

   
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>"
    text += "var cars = " + cars[i]
}
document.getElementById("demo").innerHTML = text;