选择表格行后，使用表格单元格数据填充文本框

Question

I need your help, 我需要你的帮助，

How can I take each of the cell data values and put them into their proper corresponding textboxes, when a table row is selected (highlighted)? 选择表行（突出显示）后，如何获取每个单元格数据值并将其放入相应的正确文本框中？

I am jQuery friendly 我对jQuery友好

Here is the HTML markup: 这是HTML标记：

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<style type="text/css">

.highlight {

    background-color: rgb(255,0,0);

}

</style>

<script type="text/javascript">

window.onload = function() {

var rowCount = $('#data tbody tr').length

$("#maxrows").val(rowCount)

function highlight(tableIndex) {

    // Just a simple check. If .highlight has reached the last, start again
    if( (tableIndex+1) > rowCount) {

        tableIndex = 0;
    }
    // Element exists?
    if($('#data tbody tr:eq('+tableIndex+')').length > 0) {
        // Remove other highlights
        $('#data tbody tr').removeClass('highlight');

        // Highlight your target
        $('#data tbody tr:eq('+tableIndex+')').addClass('highlight');

        $("#rownum").val(tableIndex+1)   
    }
    else {
        $("#rownum").val(0) 
    }
}

$('#goto_first').click(function() {
    highlight(0);
});

$('#goto_prev').click(function() {
    highlight($('#data tbody tr.highlight').index() - 1);
});

$('#goto_next').click(function() {
    highlight($('#data tbody tr.highlight').index() + 1);
});

$('#goto_last').click(function() {
    highlight($('#data tbody tr:last').index());
});

$( "#data tbody tr" ).click(function() {
    highlight($(this).index());
});

$('#goto_row').click(function() {

    var row = prompt("Enter the row number to highlight")

    highlight(row-1)

});

$('#remove_row').click(function() {

    $('.highlight').remove();

    renumberRows()

});


function renumberRows() {
    $('#data tr').each(function(index, el){
        $(this).children('td').first().text(index++);
    });

    /*Update row count */
    rowCount = $('#data tbody tr').length
    $("#maxrows").val(rowCount)
     $('#goto_first').trigger('click');
}







    $('#data tr').keydown(function (e) {

        switch(e.which) {
            case 38:
                $('#goto_prev').trigger('click');
                break;
            case 40:
                $('#goto_next').trigger('click');
                break;
        }

     });


    $("#rownum_1").keypress(function (e) {
        if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) {
            return false
        }
        else {
            highlight(this.value-1)
        }

    });


    $("#rownum").keyup(function (e) {

        if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) { return false }

        else {

            highlight(this.value-1)

        }
    }); 










//Default action
 $('#goto_first').trigger('click');

}


</script>

</head>

<body>
Keyword Search:
<input type="text" id="search-input"><br>

<table id="data" border="1" cellspacing="1" cellpadding="1">

    <thead>
        <tr>
            <th>#</th>
            <th>Color</th>
            <th>Fruit</th>
            <th>Name</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>red</td>
            <td>kiwi</td>
            <td>Lindsay</td>
            <td>closed</td>
        </tr>
        <tr>
            <td>2</td>
            <td>blue</td>
            <td>mangos</td>
            <td>Sarah</td>
            <td>open</td>
        </tr>
        <tr>
            <td>3</td>
            <td>green</td>
            <td>oranges</td>
            <td>Joseph</td>
            <td>hold</td>
        </tr>
        <tr>
            <td>4</td>
            <td>yellow</td>
            <td>pears</td>
            <td>Jenny</td>
            <td>open</td>
        </tr>
        <tr>
            <td>5</td>
            <td>orange</td>
            <td>bananas</td>
            <td>Mike</td>
            <td>closed</td>
        </tr>
        <tr>
            <td>6</td>
            <td>purple</td>
            <td>lemon</td>
            <td>Jerry</td>
            <td>open</td>
        </tr>
        <tr>
            <td>7</td>
            <td>teal</td>
            <td>apples</td>
            <td>Larry</td>
            <td>hold</td>
        </tr>
    </tbody>
</table>
Row Number:
<br>
<input type="text" id="rownum"><br>
of
<br>
<input type="text" id="maxrows" readonly>
<br>
<input type="button" id="goto_first" value="first">
<input type="button" id="goto_prev" value="prev">
<input type="button" id="goto_next" value="next">
<input type="button" id="goto_last" value="last">
<input type="button" id="goto_row" value="goto row">
<input type="button" id="remove_row" value="remove row">
<br>
Color<input type="text" id="color">
Fruit<input type="text" id="fruit">
Name<input type="text" id="name">
Status<input type="text" id="status">


    </body>
</body>
</html>

Answer 1

So - what you'll probably want to do is store the index of which column goes with the input. 所以-您可能想要做的是存储与输入对应的列的索引。

In this fiddle , I did this with the data-col attribute on the inputs. 在这个小提琴中，我使用输入上的data-col属性进行了此操作。

Color<input type="text" id="color" data-col="1">
Fruit<input type="text" id="fruit" data-col="2">
Name<input type="text" id="name" data-col="3">
Status<input type="text" id="status" data-col="4">

$('#color').val(getCellHtml(row, $('#color').attr('data-col')));
$('#fruit').val(getCellHtml(row, $('#fruit').attr('data-col')));
$('#name').val(getCellHtml(row, $('#name').attr('data-col')));
$('#status').val(getCellHtml(row, $('#status').attr('data-col')));

function getCellHtml(row, rowIndex){
    var cells = row.find('td');
    return $(cells[rowIndex]).html();
}

选择表格行后，使用表格单元格数据填充文本框

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-05-23 18:53:17

选择表格行后，使用表格单元格数据填充文本框

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-05-23 18:53:17

解决方案1
0 已采纳 2014-05-23 18:53:17