使文本框在tr（row）单击上可见，并在DIV中的按钮单击上打印相同的数据

Question

我的期望是：假设我有两行，当用户单击选定的行时，该文本框将被隐藏，并且该标签将作为显示显示，该标签应被隐藏并且该特定行以及之后的文本框应可见如果用户单击按钮，则应打印数据或单击的行文本框值#showresult

当前：正在单击某一行上的颜色，但不确定如何使文本行在特定行上可见并在单击按钮时在div中打印该文本框

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

根据您的解释，我认为此示例与您要实现的目标相匹配。

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());
    });
});

小提琴

 $('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

可能有帮助

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>