0

我想内联编辑单列。我正在使用数据表。目前它正在编辑所有列。我想编辑第四列。

HTML

<table id="demo-dtable-01" class="table table-striped">
<thead>
    <tr>
        <th>Country</th>
        <th>Death rate per 1,000 people</th>
        <th>Population aged 0-14 (%)</th>
        <th>Population aged 15-64 (%)</th>
        <th>Population aged 65++ (%)</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Afghanistan</td>
        <td>19.255</td>
        <td>48.10763351</td>
        <td>49.68900481</td>
        <td>2.203361681</td>
        <td><a class="edit" href="">Edit</a></td>
        <td><a class="delete" href="">Delete</a></td>
    </tr>
    <tr>
        <td>Albania</td>
        <td>6.025</td>
        <td>29.88720825</td>
        <td>62.67491054</td>
        <td>7.437881203</td>
        <td><a class="edit" href="">Edit</a></td>
        <td><a class="delete" href="">Delete</a></td>
    </tr>
    <tr>
        <td>Algeria</td>
        <td>5.153</td>
        <td>34.22623374</td>
        <td>61.64253829</td>
        <td>4.131227966</td>
        <td><a class="edit" href="">Edit</a></td>
        <td><a class="delete" href="">Delete</a></td>
    </tr>
    <tr>
        <td>Zambia</td>
        <td>13.3</td>
        <td>16.80555739</td>
        <td>68.11935112</td>
        <td>15.07509149</td>
        <td><a class="edit" href="">Edit</a></td>
        <td><a class="delete" href="">Delete</a></td>
    </tr>
    <tr>
        <td>Zimbabwe</td>
        <td>6.8</td>
        <td>23.28224459</td>
        <td>65.14242026</td>
        <td>11.57533516</td>
        <td><a class="edit" href="">Edit</a></td>
        <td><a class="delete" href="">Delete</a></td>
    </tr>
</tbody>

代码：

function restoreRow ( oTable, nRow )
{
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);

for ( var i=0, iLen=jqTds.length ; i<iLen ; i++ ) {
    oTable.fnUpdate( aData[i], nRow, i, false );
}

oTable.fnDraw();
}

行编辑功能

function editRow ( oTable, nRow )
{
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'">';
jqTds[1].innerHTML = '<input type="text" value="'+aData[1]+'">';
jqTds[2].innerHTML = '<input type="text" value="'+aData[2]+'">';
jqTds[3].innerHTML = '<input type="text" value="'+aData[3]+'">';
jqTds[4].innerHTML = '<input type="text" value="'+aData[4]+'">';
jqTds[5].innerHTML = '<a class="edit" href="">Save</a>';
}

保存行的功能

function saveRow ( oTable, nRow )
{
var jqInputs = $('input', nRow);
oTable.fnUpdate( jqInputs[0].value, nRow, 0, false );
oTable.fnUpdate( jqInputs[1].value, nRow, 1, false );
oTable.fnUpdate( jqInputs[2].value, nRow, 2, false );
oTable.fnUpdate( jqInputs[3].value, nRow, 3, false );
oTable.fnUpdate( jqInputs[4].value, nRow, 4, false );
oTable.fnUpdate( '<a class="edit" href="">Edit</a>', nRow, 5, false );
oTable.fnDraw();
}

查询：

 $(document).ready(function() {
var oTable = $('#demo-dtable-01').dataTable();
var nEditing = null;

$('#demo-dtable-01 a.delete').live('click', function (e) {
    e.preventDefault();

    var nRow = $(this).parents('tr')[0];
    oTable.fnDeleteRow( nRow );
} );

$('#demo-dtable-01 a.edit').live('click', function (e) {
    e.preventDefault();

    /* Get the row as a parent of the link that was clicked on */
    var nRow = $(this).parents('tr')[0];

    if ( nEditing !== null && nEditing != nRow ) {
        /* Currently editing - but not this row - restore the old before continuing to edit mode */
        restoreRow( oTable, nEditing );
        editRow( oTable, nRow );
        nEditing = nRow;
    }
    else if ( nEditing == nRow && this.innerHTML == "Save" ) {
        /* Editing this row and want to save it */
        saveRow( oTable, nEditing );
        nEditing = null;
    }
    else {
        /* No edit in progress - let's start one */
        editRow( oTable, nRow );
        nEditing = nRow;
    }
 } );
} );

参考链接http://datatables.net/media/blog/inline-editing/complete.html 在此示例中，所有列都获得编辑选项。我只想要第四栏提前谢谢

4

1 回答 1

0

然后你可以使用这个。在这个中你只能编辑一个单元格值

编辑单元格值

于 2013-06-09T09:37:19.177 回答