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 () {
    var $i=0;
    $(".selectrow").click(function () {
        var $row = $(this).closest("tr");
        var $idtext = $row.find(".id").text();
        var $nametext = $row.find(".name").text();
        var $idcheck = $("#out").find($idtext);      
        
        if (($($row).hasClass("merge")) && ($($row).not('posted'))) { 
            alert("has merge");
        //    $($row).toggleClass("merge");
            $($row).toggleClass("posted");

        } else if (($($row).not("merge")) && ($($row).not('.posted'))) { 
            $i++;
            alert("new select"+$i);
            
            $($row).toggleClass("merge");
            $($row).addClass("posted");
            $("#out").append("<div class='idresult' id='"+ $i +"'>" + $idtext + "</div>");
            $("#out").append("<div class='nameresult' id='"+ $i +"'>" + $nametext + "</div>");
            
        } else if ($($row).hasClass("posted")) { 
            alert("has posted");
            $($row).toggleClass("merge");


        }

    });



});

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...