table row selection 2

by Craig Martin

HTML

<button onclick="resetSelection()" id "reset">reset</button>
<table id="grid">
    <tr id="row-1" class="">
        <td class="id">id 1</td>
        <td class="name">name 1</td>
        <td>
            <button class="selectrow">select row</button>
        </td>
    </tr>
    <tr id="row-2">
        <td class="id">id 2</td>
        <td class="name">name 2</td>
        <td>
            <button class="selectrow">select row</button>
        </td>
    </tr>
</table>
<div id="code"></div>

<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

$(document).ready(function () {
    $(".selectrow").click(function () {
        var $row = $(this).closest("tr");
        var $idtext = $row.find(".id").text();
        var $nametext = $row.find(".name").text();
        var i;
        $($row).toggleClass("merge");
        if ($($row).hasClass("merge")) {//alert("has merge");
       
        $("#code").html($nametext);
        } else { //alert("no merge");
     
        }
   //     $("#out").append(('<div class="selectadded">') + ($nametext.text()) + ('</div>'));
    });

});

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


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



// <!-- 
// $(document).ready(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 () {        
//  ...