I am trying to use tabletogrid function in the jqgrid plugin. My problem is if I delete a row in table then the width attribute of the table cells just disappears. But if the last row is deleted then the delete operation happens as expected. For example, here's my html table -

<table id="item_table">
    <thead>
        <tr>
            <th width="60">Date</th>
            <th width="15">Icon</th>
            <th width="80">Shop</th>
            <th width="15">Delete</th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td width="60" class="col_date">
                <div class="date">开发者_如何转开发</div>
            </td>
            <td width="15" class="col_icon">
                <div class="icon"></div>
            </td>
            <td width="80" class="col_shop">
                <div class="shop"></div>
            </td>
            <td width="25" class="col_delete">
                <div class="delete"></div>
            </td>
        </tr>
    </tbody>
</table>

Then I add the contents to the table using an ajax code. After that here's my jqgrid setting.

    jQuery.extend(jQuery.jgrid.defaults, {
        caption: "Shops",
        autowidth: true,
        height: 24,
        hidegrid: false,
        onCellSelect: function(rowid, index, contents, target) {
            if (index == 3) {
                $('#item_table tr:eq(' + rowid + ')').remove();
            }
        },
        colModel:[
            { name: 'date', index: 'date', width: 0, resizable: false },
            { name: 'icon', index: 'icon', width: 0, resizable: false },
            { name: 'shop', index: 'shop', width: 0, resizable: false },
            { name: 'delete', index: 'delete', width: 0, resizable: false }
        ]
    });
    tableToGrid("#item_table", {
        colNames: ['Date', '', 'Shop', 'Delete']
    });

The delete action causes the width attribute to disappear. Why is this happening?

The cells in the grid get displayed like this...

<TD style="WIDTH: 80px" title="" role=gridcell><DIV class=shop></DIV></TD>

If delete any row except the last row, the cells become like this....

<TD title="" role=gridcell><DIV class=shop></DIV></TD>

Width attribute gets removed. What am I missing over here?

After converting the table to the jqGrid you can use any methods of jqGrid. The standard way to delete a row in the jqGrid is delRowData method.

$('#item_table').jqGrid('delRowData',rowid);

To make the height of the grid automatically adjustable you can add the option height:'100%'. One more setting for the column definition title:false for all columns in the colModel, which title attribute should not be created, can be also helpful for you.

One more small remark. Look at the formatter:'actions' or custom formatter which is very easy in use but allows you to create and HTML code fragment as the cells content. All the features could be interestring for the 'delete' coulmn.

gridPreSeleccion: id grid

this grid is multiselect true call with an event jquery

//Funcion que elimina los multiselect de un jqgrid seleccionados
function eliminarSeleccionados() {
   var idsContribuyentesSelect = jQuery("#gridPreSeleccion").jqGrid('getGridParam', 'selarrrow');
  if(idsContribuyentesSelect.length == 0) {
    jQuery.MessageAlertSath("Es necesario seleccionar una fila.")
  } else {
    var ids = jQuery("#gridPreSeleccion").jqGrid('getDataIDs');
    var a = ids.length;
    var j = 0;
    while(j == 0) {
      if(jQuery("#gridPreSeleccion").jqGrid('getGridParam', 'selarrrow').length <= 0) {
        j = 1;
      } else {
        for(var i = 0; i < a; i++) {
          if(idsContribuyentesSelect[0] == ids[i]) {
            jQuery('#gridPreSeleccion').delRowData(ids[i]);
            break;
          }
        }
      }
    }
  }
}