javascript - 使文本框在 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());
    });
});

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>