使文本框在 tr(row) 单击时可见，并在 DIV 中单击按钮时打印相同的数据答案

【问题标题】：make a textbox visible on a tr(row) click and print the same of the data on button click in a DIV使文本框在 tr(row) 单击时可见，并在 DIV 中单击按钮时打印相同的数据
【发布时间】：2015-08-16 07:33:14
【问题描述】：

我的期望是：假设我有两行，当用户单击所选行时，文本框将被隐藏，标签将可用作显示，标签应隐藏，文本框应对该特定行可见行，然后如果用户单击按钮，则应打印数据或单击的行文本框值#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>

【问题讨论】：

提示：使用display: none隐藏，$(elem).show()显示
@l19 感谢您的回复，但我该如何打印数据
为更新 div 的按钮添加事件处理程序
@l19 不知道该怎么做
您到底想显示什么值？

标签： javascript jquery html

【解决方案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>

【讨论】：

感谢您的支持，我期待同样的结果并感谢您的支持，但我怎样才能在标签或文本框应该可见时隐藏切换标签
绝对是我觉得我给你压力很大，但我需要更多帮助？？
如果任何文本框不可见或它们可见且文本框没有值，是否可以禁用打印按钮
让我们continue this discussion in chat.
@Pauli 确定只针对您想要的表，如下所示：jsfiddle.net/wallek876/vmj5h2a8/7

【解决方案2】：

可能会有所帮助

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>

【讨论】：

但所有未编辑的数据都重新打印了
是的，你是正确的，点击按钮，应该打印相同的数据
尝试更改数据，然后点击“printdata”查看结果
@Odai Alali ma b am notshore 如何改变它你能帮我吗？？
通过点击一行后更改文本框的值..运行代码 sn-p 并使用它