Imagine a sheet of paper, you draw a table. If you need 1 more column on the left - just take and draw on the left. How exactly to do this in HTML? Adding a column to the position "0" in the usual way row.insertCell (0) - it rises to the place of the previous first, all the other columns are shifted to the right. It is necessary that the column appears on the left and the new coordinates of X become at the table.

Add a column in the usual way and do not suggest to move the entire table to the left for the width of the new column. Need a way to technically working on paper.

The code of the usual method that moves the tablet to the right (it is necessary to reverse):

<html> <head> <script type='text/javascript'> function addColumnLeft() { var tblBodyObj = document.getElementById('tbl').tBodies[0]; for (var i=0; i<tblBodyObj.rows.length; i++) { var newCell = tblBodyObj.rows[i].insertCell(0); } } </script> <style> table, td { table-layout: fixed; border: 1px solid black; width: 100px; height: 100px; } </style> </head> <body> <table id="tbl" style="position:absolute; top:10px; left:300px;"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> </tr> </table> <button onclick="addColumnLeft();">add column</button> </body> </html>
  • 2
    Even on paper it technically works until the paper runs out :( - Arik
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

3 answers 3

You add the first column and hang extra-left-column on the cells and make the following css:

 table { position: relative; } .extra-left-column { position: absolute; width: 7em; /* любая нужная ширина */ left: -7em; /* она же, но с минусом */ }

Well, the table should have enough space in advance to the left. This can be done, for example, as follows:

 table { margin-left: 7em; }

In general, in my opinion, it will be right to immediately make a table with the necessary cells, and just hide temporarily unnecessary

  • Perhaps the most correct decision. A bit crooked new cells are set if all coordinates \ sizes of the existing cells are by default, but this is fixable - alexoy
  • @ qwerty007, no, they shouldn't. It is enough that they will be the same height. - Qwertiy ♦

Try this, I think it suits you (Version 1)

 <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#exampleTable').find('td').each(function(i, el) { var inputEl = $(el).children().get(0); $(el).before('<td>Added ' + $(inputEl).attr('type') + '</td>'); }); }); </script>

or Version 2

 $("tbody tr").each( function() { $(this).find("td:eq(" + cellBefore + ")").after("<td>" + spliceFirst + "</td>"); $(this).find("td:eq(" + cellAfter + ")").after("<td>" + spliceLast + "</td>"); });

or easier Version 3

 $("tbody tr").each( function() { $(this).find("td:eq(" + column + ")").after("<td>" + spliceFirst + "</td>").before("<td>" + spliceLast + "</td>"); });
  • Unfortunately not, it works like row.insertCell (0), shifting all other columns to the right, the X coordinate of the table does not change. Other speakers should visually remain in the same place - alexoy
  • Then move the table to the left by the width of the added column - Saidolim
  • The question says "Add a column in the usual way and do not suggest to move the entire table to the left for the width of the new column. We need a technically working method like on paper" :) - alexoy
  • Then show your code. This can be done over the work of the superior DIV. If it were given a code, it would be easier to navigate - Saidolim
  • Saidolim, tell me, is it convenient for you to perform some actions when they hang on the select? if so, do not tell me how you can immediately perform the action wired in the first paragraph of your select? - MasterAlex

At once I will make a reservation that adding a column was written by the first virus that occurred to me, but in the examples this is not the main idea, so if you like, you can use any other option.

Here is the first option, but it’s probably not suitable for the author, after all, the column is moving a bit, but in terms of accuracy on the web, it will be more adaptive:

 $(document).ready(function() { var i = 0; $('button').click(function() { $('tr').prepend('<td>cell ' + i + '</td>'); i = i - 1; }); }); 
 table { margin: 0 auto; } td { border: 1px solid #ccc; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td> </tr> </tbody> </table> <button>Click me</button>

The second option, this is exactly what the author wants, took the indentation for the example of a random, and the end of the sheet is determined by the middle cell in the table and if it is more than the remaining space, the cell is not added and the message appears:

 $(document).ready(function() { var i = 0; $('button').click(function() { var tabMargin = parseFloat($('table').css('margin-left')); var tableCellLength = $('tr').find('td').length; var tableWidth = parseFloat($('table').css('width')); if (tabMargin - tableWidth / tableCellLength - 15 > 0) { $('tr').prepend('<td>cell ' + i + '</td>'); var addCellWidth = parseFloat($('tr').find('td').eq(0).css('width')); $('table').css('margin-left', tabMargin - addCellWidth - 6 + 'px'); i = i - 1; } else { alert('Вы пытаетесь нарисовать ячейку на столе'); } }); }); 
 table { margin-left: 175px; } td { border: 1px solid #ccc; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td> </tr> </tbody> </table> <button>Click me</button>

UPD. Option 3. The table no longer jumps, but did not limit the width, you can optionally take from the second option:

 $(document).ready(function() { var j = 0; var tableRowLength = $('#mainTable').find('tr').length; for (var i = 0; i < tableRowLength; i++) { $('#tablePaste').append('<tr></tr>'); } $('button').click(function() { $('#tablePaste').find('tr').prepend('<td>cell ' + j + '</td>'); j = j - 1; }); }); 
 table { margin-left: 200px; } td { border: 1px solid #ccc; } .paste-box { position: relative; width: 201px; text-align: right; } #tablePaste { position: absolute; top: 0; right: 0; } #tablePaste td { white-space: nowrap; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="paste-box"> <table id="tablePaste"> </table> </div> <table id="mainTable"> <tbody> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td> </tr> </tbody> </table> <button>Click me</button>

Ps. I apologize for my jQuery, if you wish, you can rewrite to native JS, but I'm lazy. :)

  • visually correct, like the answer of the previous person, but technically not - you at the end manually shift the plate to the left changing the 'margin-left'. Those. after pressing the button, the tablet makes a quick jump forward and back. Need without jumps - alexoy
  • And what do you mean by the phrase "visually" correctly, speaking about the answer of the previous author? Personally, I didn’t see there anything that your task solves, moreover in the third example, the cell is not added to the beginning under any circumstances, which does not solve the task condition at all (firefox browser). - MasterAlex
  • I added the third option, where the table does not make jumps, but I have to make another table, because I don’t know the solution options without jumps when working with one element, it is possible that there are not any - MasterAlex
  • Thanks for the difficulties :) sorry while I can not put the pluses - alexoy