Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    beginner: inserting new rows into a table

    I'm trying to end a row & add a new row after every 5th table cell through js. What am I doing wrong here?

    Code:
    <script>
    function init() {
    	var table = document.getElementById("myTable");
    	var td = table.getElementsByTagName("td");		
    
    	for(x=4; x<td.length; x=x+5) {
    		$(td[x]).after("</tr><tr>");
    	}
    
    	/*alert($("#holder").html());*/
    }
    window.onload = init;
    </script>
    Code:
    <div id="holder">
    <table id="myTable">
    <tr>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    <td><div><img src=""><p><span>name</span>description</p></div></td>
    </tr>
    </table>
    </div>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    $().after() can only insert a complete DOM element (i.e. a complete row). But it can't just wrap lines which is what you really want to do. Please look at .wrapAll()

    Btw. why are you using getElementsByTagName and getElementById if you are already using jQuery?

    The task itself cannot easily be done. I found a pluig-in that you could use (http://forloop.co.uk/blog/wrap-child...oups-in-jquery)
    Code:
    // Copyright (c) 2011 Russ Cam
    // -------------------------------------------------------
    // Dual licensed under the MIT and GPL licenses.
    //   - http://www.opensource.org/licenses/mit-license
    //   - http://www.opensource.org/licenses/gpl-3.0
    (function($){
        $.fn.wrapChildren = function(options) {
     
            options = $.extend({
                                  childElem : undefined,
                                  groupSize : 1,
                                  wrapper : '<div>'
                                }, options || {});
                                 
            if (options.childElem === undefined) return this;
     
            return this.each(function() {
                var elems = $(this).children(),
                    len = pos = 0;
                 
                elems.each(function(i,value) {
                    len += $(value).is(options.childElem)? 1 : 0;                   
                    if (len > 0 && (len % options.groupSize === 0) || (i === elems.length - 1)) {         
                      elems.slice(pos,i + 1).wrapAll(options.wrapper);
                      len = 0;
                      pos = i + 1;
                    }
                });
            });
             
        }
    })(jQuery);
    Sample call for you
    Code:
    $('#myTable tbody').wrapChildren({ childElem : 'td' , groupSize: 5, wrapper : '<tr>'})

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Why not use the methods built into JavaScript itself for adding a row to a table?

    For example:

    Code:
    var tables, lastRow, row, newCell, rowValues;
    rowValues = ['first cell', 'cell 2', 'another cell'];
    tables = document.getElementsByTagName('table');
    lastRow = tables[0].rows.length;
    row = tbl.insertRow(lastRow);
     
    for (var i = 0, ii = rowValues.length; i < ii; i++) {
      newCell = row.insertCell(i);
      newCell.appendChild(document.createTextNode(rowValues[i]));
     }
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    @felgall How would that group some existing td table elements into new rows?

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by devnull69 View Post
    @felgall How would that group some existing td table elements into new rows?
    If the values being assigned to those new rows or cells were existing elements in the page then you would need to use deleteCell and deleteRow to remove them from their prior location as these insert commands would be creating new <tr> and <td> elements and not moving the existing ones.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •