Question

我需要你的帮助，

当选择（突出显示）表格行时，如何获取每个单元格数据值并将它们放入正确的相应文本框中？

我是jQuery友好的

以下是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

所以 - 您可能想要做的是存储哪个列与输入一起的索引。

在this fiddle中，我使用输入中的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 个答案: