Question

我有一个文本框和标签的数组，这些文本框和标签在html表格中切换，比如标签vl首先可见，然后在行上单击文本框是可见的，但如果我更改了该行，则问题出在该行上文本框值标签值也应该更改，但听到我的情况下无法做到。

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" value="data1" />
        </td>
        <td>
            <label>data2</label>
            <input type="text" value="data2" />
        </td>
        <td>
            <label>data3</label>
            <input type="text"  value="data3"/>
        </td>
        <td>
            <label>data4</label>
            <input type="text" value="data4"/>
        </td>
        <td>
            <label>data5</label>
            <input type="text" value="data5"/>
        </td>
    </tr>
    <tr>
        <td>
            <label>data6</label>
            <input type="text" value="data6" />
        </td>
        <td>
            <label>data7</label>
            <input type="text"  value="data7"/>
        </td>
        <td>
            <label>data8</label>
            <input type="text" value="data8" />
        </td>
        <td>
            <label>data9</label>
            <input type="text" value="data9" />
        </td>
        <td>
            <label>data10</label>
            <input type="text" value="data10" />
        </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：

$('#table1 input').hide();
$('#printdata').fadeTo(0, 0);

// This shows or hides the button deppending on the inputs
$('#table1 tr').on('change keyup click', function() {
    var text = '';
    $('input', this).each(function(){
        text += $(this).val();
    });

    if (text !='')
    {
        $('#printdata').fadeTo(0, 100);
    }
    else
    {
        $('#printdata').fadeTo(0, 0);
    }
});

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



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

Answer 1

尝试添加此代码： -

$('#table1 tr').on('change','[type="text"]', function(e) {
  $(this).prev('label').text($(this).val());
});

Demo

Answer 2

那么，您需要添加的内容才能使代码正常运行：

$('#table1 input').each(function(idx, input) {
    var jqInput = $(input);
    var label = jqInput.parent().find("label")
    jqInput.change(function() {
        label.text(jqInput.val())
    })
})

然而，这是一条很滑的道路。您正在尝试维护某些状态，将其显示在不同的视图中... 这种方法总会出现某种数据同步问题。您需要使用某种MVC来使您的生活更轻松，代码更稳定。

在文本框上将标签值更改为HTML（数组）

2 个答案: