make a textbox visible on a tr(row) click and print the same of the data on button click in a DIV

Question

my expectation is: Say i have two rows, The textbox will be hidden and the label will be available as a display when a user click on a selected row the label should be hidden and the text box should be visible of that particular row and after that if the user clicks on the button then the data or the clicked row textbox value should be printed #showresult

current: am getting the color on a row clicked but am not sure how to make a text box visible on a particular row and print the same in a div on button click

JS:

 $(document).ready(function () { $('tr').click(function () { if(this.style.background == "" || this.style.background =="white") { $(this).css('background', 'red'); } else { $(this).css('background', 'white'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" cellspacing="1" width="100%" id="table1"> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> </tr> <tr> <td><label>data1</label> <input type="text" value="1" /></td> <td><label>data2</label> <input type="text" value="2" /></td> <td><label>data3</label> <input type="text" value="3" /></td> <td><label>data4</label> <input type="text" value="4" /></td> <td><label>data5</label> <input type="text" value="5" /></td> </tr> <tr> <td><label>data6</label> <input type="text" value="6" /></td> <td><label>data7</label> <input type="text" value="7" /></td> <td><label>data8</label> <input type="text" value="8" /></td> <td><label>data9</label> <input type="text" value="9" /></td> <td><label>data10</label> <input type="text" value="10" /></td> </tr> </table> <input type="button" value="printdata"/> <div id="showresult"></div> 

Answer 1

According with you explanation i think this example match what you are trying to accomplish.

css:

.selected {
    background: red;
}

Html:

<table border="1" cellspacing="1" width="100%" id="table1">
    <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th>Column5</th>
    </tr>
    <tr>
        <td>
            <label>data1</label>
            <input type="text" />
        </td>
        <td>
            <label>data2</label>
            <input type="text" />
        </td>
        <td>
            <label>data3</label>
            <input type="text" />
        </td>
        <td>
            <label>data4</label>
            <input type="text" />
        </td>
        <td>
            <label>data5</label>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <label>data6</label>
            <input type="text" />
        </td>
        <td>
            <label>data7</label>
            <input type="text" />
        </td>
        <td>
            <label>data8</label>
            <input type="text" />
        </td>
        <td>
            <label>data9</label>
            <input type="text" />
        </td>
        <td>
            <label>data10</label>
            <input type="text" />
        </td>
    </tr>
</table>
<input id="printdata" type="button" value="printdata" />
<div class="showresult">1: <span></span></div>
<div class="showresult">2: <span></span></div>
<div class="showresult">3: <span></span></div>
<div class="showresult">4: <span></span></div>
<div class="showresult">5: <span></span></div>

js:

$('tr input').hide();

$('tr').on('click', function (e) {
    if ($( e.target ).is("input")) {
        return;
    } else if ($(this).hasClass('selected')) {
        $(this).toggleClass('selected');
        $('input', this).toggle();
    } else {
        $('tr.selected input').hide();
        $('tr.selected').toggleClass('selected');
        $(this).toggleClass('selected');
        $('input', this).toggle();
    }
});

$('#printdata').click(function () {
    $('.showresult').each(function (index) {
        $('span', this).html('');
        $('span', this).html($('tr.selected input').eq(index).val());
    });
});

fiddle

 $('tr input').hide(); $('tr').on('click', function (e) { if ($( e.target ).is("input")) { return; } else if ($(this).hasClass('selected')) { $(this).toggleClass('selected'); $('input', this).toggle(); } else { $('tr.selected input').hide(); $('tr.selected').toggleClass('selected'); $(this).toggleClass('selected'); $('input', this).toggle(); } }); $('#printdata').click(function () { $('.showresult').each(function (index) { $('span', this).html(''); $('span', this).html($('tr.selected input').eq(index).val()); }); }); 

 .selected { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" cellspacing="1" width="100%" id="table1"> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> </tr> <tr> <td> <label>data1</label> <input type="text" /> </td> <td> <label>data2</label> <input type="text" /> </td> <td> <label>data3</label> <input type="text" /> </td> <td> <label>data4</label> <input type="text" /> </td> <td> <label>data5</label> <input type="text" /> </td> </tr> <tr> <td> <label>data6</label> <input type="text" /> </td> <td> <label>data7</label> <input type="text" /> </td> <td> <label>data8</label> <input type="text" /> </td> <td> <label>data9</label> <input type="text" /> </td> <td> <label>data10</label> <input type="text" /> </td> </tr> </table> <input id="printdata" type="button" value="printdata" /> <div class="showresult">1: <span></span></div> <div class="showresult">2: <span></span></div> <div class="showresult">3: <span></span></div> <div class="showresult">4: <span></span></div> <div class="showresult">5: <span></span></div> 

Answer 2

Could be helpful

a working example on codepen.io

 $(document).ready(function () { $('tr').click(function () { if(!$(this).hasClass("active")) { $('tr').removeClass('active') $(this).addClass('active'); } }); }); $("#b-print").click(function(){ $('div#showresult').html(''); $.each($('tr'), function(idx, obj){ $.each($(obj).find('input[type=text]'), function(idx2, obj2){ $('div#showresult').append($(obj2).val()+", "); }); $('div#showresult').append('<br/>'); }); }); 

 tr input[type=text]{ display: none; } tr.active{ background: red; } tr.active input[type=text]{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" cellspacing="1" width="100%" id="table1"> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> <th>Column4</th> <th>Column5</th> </tr> <tr> <td><label>data1</label> <input type="text" value="1" /></td> <td><label>data2</label> <input type="text" value="2" /></td> <td><label>data3</label> <input type="text" value="3" /></td> <td><label>data4</label> <input type="text" value="4" /></td> <td><label>data5</label> <input type="text" value="5" /></td> </tr> <tr> <td><label>data6</label> <input type="text" value="6" /></td> <td><label>data7</label> <input type="text" value="7" /></td> <td><label>data8</label> <input type="text" value="8" /></td> <td><label>data9</label> <input type="text" value="9" /></td> <td><label>data10</label> <input type="text" value="10" /></td> </tr> </table> <input type="button" value="printdata" id="b-print"/> <div id="showresult"></div>