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 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to merge table cells

    Hi,

    I want to know if there are an examples out there on how to merge tables cells visually.

    I have written code to capture a dblclick on a table cell to select it.

    Code:
    onload=
    function tblEvent()
    {
          var editor = document.getElementById("Editor");
          var cells = editor.getElementsByTagName("td");
    
          for(var i=0;i<cells.length;i++)
          {
             cells[i].ondblclick = selectCell(cell[i]);
          }
    }
    The selectCell function just stores the cell number in a hidden field and sets the style to a highlight color.

    How would I get reliable cell merging. I have had a crack at it and it is very buggy.
    Asp.Net 1.1 - 20 hrs
    CSS 2.0 - 3 hrs
    XHTML 1.1 - 5hrs
    JavaScript - 5hrs
    Cross-Browser Compatibility - Priceless

  • #2
    New Coder
    Join Date
    Oct 2005
    Location
    London, United Kingdom
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use the colSpan td property to merge the cells in the table.
    Check the example at the colSpan property.
    Code Review 4U - boost your code and skills for
    being social - JavsScript and C# code reviews.

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know how to write HTML and can colspan or rowspan anything under the sun but what I want is a dynamic way to select a table cell (ie in a rich text editor) and then click a merge cells button and have my code d the work. Like in MS Word. You just select the cells you want and click MERGE!
    Asp.Net 1.1 - 20 hrs
    CSS 2.0 - 3 hrs
    XHTML 1.1 - 5hrs
    JavaScript - 5hrs
    Cross-Browser Compatibility - Priceless

  • #4
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    are you using execCommand to create your html?
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #5
    New Coder
    Join Date
    Feb 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess I have not been very clear on what I am doing.

    I am writing a CMS and am using a rich text editor to allow the user to visually create tables and format text.

    I have a button that inserts a table to the users specifications. What I want now is to let the user select cells of that table and then click merge and have the program do it for them.

    I am not he user of this product. It will be people that do not know HTML, and do not want to. I need a visual way to merge cells.
    Asp.Net 1.1 - 20 hrs
    CSS 2.0 - 3 hrs
    XHTML 1.1 - 5hrs
    JavaScript - 5hrs
    Cross-Browser Compatibility - Priceless

  • #6
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rlemon
    are you using execCommand to create your html?
    again, we need to know the background of your RTE (WYSIWYG) editor to help.

    the problem you are having is independant of the application you are using the editor in. The editor is where the stem of the problem must be.
    now i use the term problem loosly, what i really mean is 'lack in functionality' as this is not a bug, but a feature you are having trouble fabricating.

    so, let me ask once more, how does your editor create this html to begin with?
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #7
    New Coder
    Join Date
    Feb 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is a <DIV> with contentEditable="true". I made the RTE, it is not a 3rd party product.

    When the user clicks add table button they are asked some options and then javascript generates the table and inserts it into the <DIV>.

    As listed in my original post is the function i use to determine which table cell is double clicked. When a cell is double clicked the javascript changes that cells className to "selected" chich in turn uses CSS to change the background color of the cell, simulating selection, the cell number is then stored in a hidden field.

    Now I need to add the merging functionality. This brings me to the present problem at hand.

    This is the function I use to insert the code into the RTE.

    Code:
    		function insertString(val)
    		{
    			document.getElementById('Design_View').focus();
    			sel = document.selection.createRange();
    			sel.pasteHTML(val);
    		}
    Asp.Net 1.1 - 20 hrs
    CSS 2.0 - 3 hrs
    XHTML 1.1 - 5hrs
    JavaScript - 5hrs
    Cross-Browser Compatibility - Priceless

  • #8
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry, i'm not firmiliar with that method. personally i use an iframe with designmode = true.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #9
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post
    If I understood you correctly, you should do this:

    1. append the content of adjacent cell (nextSibling) to first selected cell in row
    2. remove the instance of adjacent cell
    3. raise the colspan value of first cell by one.
    Last edited by Zvona; 10-17-2005 at 09:54 PM.
    Zvona
    First Aid for
    Web Design


  •  

    Posting Permissions

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