Question

我有一张表，我可以在其中动态添加和删除行。我有名为/ id的单元格 imageDesc0，imageFile0 - （对于0行）和imageDesc1，imageFile1对于（第1行）依此类推...... 因此，当我删除这个动态添加的行时，我可以删除该行但是我需要重命名名为+ n（行号）的单元格，以防删除行。此外，第一列应具有正确的行号。有如下代码，但似乎不能很好地工作。有人可以吗。救命。感谢。

JSP

<div class="container">
        <h2>Image Details</h2>
        <div class="table-responsive col-md-11 column">
            <table class="table table-striped table-hover table-bordered" id="tableImage" name="tableImage">
                <thead>
                    <tr >
                        <th class="text-center col-md-1 column"> # </th>
                        <th class="text-center col-md-5 column"> Desc </th>
                        <th class="text-center col-md-4 column"> Upload File </th>
                        <th class="text-center col-md-2 column"> Delete </th>

                    </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td><input type="text" id="imageDesc0" name="imageDesc0" class="form-control"/></td>    
                    <td><input type="file" id="imageFile0" name="imageFile0"  /></td>   
                    <td class="deleterow"><div class="glyphicon glyphicon-remove"></div></td>
                    <td style="display:none">
                        <input type="hidden" id="tableImageRowCount" name="tableImageRowCount"  class="form-control"/>
                    </td>
                </tr>
                </tbody>
             </table>
        </div>
        <a class="btn btn-info addNewImageRow pull-left">Add New <span class="glyphicon glyphicon-plus"></span></a>
    </div>

JS

function onloadInitiatializeQuestionImageGrid() {

$('.addNewImageRow').on('click', function(){
    var rowIndex = $('#tableImage tr').length - 1;
    var rowCounter = rowIndex + 1;
    $('#tableImage tr:last').after("<tr><td>" + rowCounter + "</td><td><input  id='imageDesc" + rowIndex + "' name='imageDesc" + rowIndex + "' type='text' class='form-control input-md'/></td>" +
                "<td><input type='file' id='imageFile"+ rowIndex +"' name='imageFile" + rowIndex + "' /></td>" +
                "<td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td></tr>")
});


$('#tableImage').on('click','.deleterow', function(){
    var $killrow = $(this).parent('tr');
        $killrow.addClass("danger");
        $killrow.fadeOut(500, function(){
        $(this).remove();
        updateImageTableRows();
    });
});

return false;
};


function updateImageTableRows(){

  var rowIndex = $('#tableImage tr').length-1;
  for (var i=0; i<rowIndex; i++){
    var imageRowCounter = $('#tableImage tr').eq(i).find("td:first");
    var imageDesc = $('#tableImage tr').eq(i).find("td:first").next();
    var imageFile = $('#tableImage tr').eq(i).find("td:first").next().next();
    imageRowCounter.text(i + 1);
    imageDesc.id='imageDesc' + i;
    imageFile.id = 'imageFile' + i;

  }
}

Answer 1

这一行

imageDesc.id='imageDesc' + i;

应该是

imageDesc.attr('id', 'imageDesc' + i);

和imageFile.id类似，并更改名称属性

表在动态删除行后重命名行中的单元格

1 个答案: