REDIPS.table documentation

30 thoughts on “REDIPS.table documentation”

1. Thank you for pointing this out -I am very impressed how this is achieved now. It would be great to be able to initiate each tables.I really want to know extending the multi-select capabilities.I must say you done incredibly flexible and very friendly to visual customizations!

   Thanks for sharing.

2. @error 1079 – I’m glad you like my work. REDIPS.table has been created to allow dynamically merge/split table cells and to add/delete table rows and columns. After loading redips-table.js is possible to mark table cells (with a mouse click) and to call REDIPS.table.merge() method. So, multiselect of table cells exists and you can select table cells in several rows or columns and to call merge() method.

3. @Dbunic: I try to merge vertical cells by changing your example 02. But it isn’t successful. Can you help me?

   function merge1() {
       REDIPS.table.mark(true, 'table1', 2, 1);
       REDIPS.table.mark(true, 'table1', 2, 2);
       REDIPS.table.merge('v', true, 'table1');
   }
   

   Thank you.

4. @Phuong Tran Tuan – Example02 has only 2 rows: row 0 and row 1. Here is how to merge cells in 3rd column:

   function merge1() {
       REDIPS.table.mark(true, 'table1', 0, 2);
       REDIPS.table.mark(true, 'table1', 1, 2);
       REDIPS.table.merge('v', true, 'table1');
   }
   

   So, don’t forget that first row and first column starts width index 0. Next, you can comment last line and set mark color to see which cells will be marked (before merging):

   function merge1() {
       REDIPS.table.color.cell = 'lime';
       REDIPS.table.mark(true, 'table1', 0, 2);
       REDIPS.table.mark(true, 'table1', 1, 2);
   //    REDIPS.table.merge('v', true, 'table1');
   }
   

5. How can i call a function when a div is moved and how to get the data for where it is moved to?

6. @jesper – I suppose that your question is related to REDIPS.drag library (this post is documentation for REDIPS.table). Both libraries can be combined to dynamically merge/split cells and drag DIV elements across tables. Anyway, if some code should be executed after DIV element is moved then define myhandler_moved() event handler and place custom JS code inside (demos in redips2.tar.gz contain a lot of examples how to use event handlers).

   And please see documentation for get_position() method how to obtain source and target positions for the dropped DIV element.

7. Is there a re-load option or load data option for example 24, The data is displayed and I can save, I can’t see a function to reload and continue with the edit?

8. @Kevin – The easiest way is to generate HTML table with server side script. All client side logic is prepared and you will have to write simple PHP/ASPX/JSP loop to create TR/TD with filled DIV elements. This is the similar to the example03 where you can see how it’s done with PHP. Hope this will not be a problem for you.

9. Hi,

   Your code is very helpful.

   I would like to select (mark) two columns, one after another and merge them such that the each row will be individually merged.

   Could you please suggest some code?

   Thanks,
   Daniel

10. @Dan – Here is source from example02/script.js file (complete redips12.tar.gz package can be download from link below post title).

    // mark cells for merging (cells should be marked in a sequence)
    REDIPS.table.mark(true, 'table1', 1, 1);
    REDIPS.table.mark(true, 'table1', 1, 2);
    REDIPS.table.mark(true, 'table1', 1, 3);
    
    // merge cells:
    // 'h' - horizontally
    // true - clear mark after merging
    // 'table1' - table id
    REDIPS.table.merge('h', true, 'table1');
    

    In this example, cells are marked one by one, but in your case you can create loop that will go through each row and select cells in desired column. After cells are marked, just call merge() method (in “horizontal” mode).

11. Hello!
    Great code! Very useful!
    Can u help me with a situation where I need to insert values from a drop down menu and enter it into the selected cells?

    Thanks :)

12. @Newbie – Here is small JS function that will copy dropdown value to the selected table cells. First see needed HTML:

    <select id="color">
        <option id="red">Red</option>
        <option id="blue">Blue</option>
        <option id="green">Green</option>
    </select>
    <input type="button" value="Copy" onclick="myCopy()"/>
    

    And here is JavaScript function:

    // function copies dropdown value to selected cells
    myCopy = function () {
            // get dropdown reference
        var dropdown = document.getElementById('color'),
            // get selected value from dropdown menu
            text = dropdown.options[dropdown.selectedIndex].value,
            // get TD collection from main table
            td = document.getElementById('mainTable').getElementsByTagName('TD'),
            // local variable
            i;
        // loop through all TD elements
        for (i = 0; i < td.length; i++) {
            // if table cell is selected
            if (td[i].redips && td[i].redips.selected === true) {
                // set value from selected item to the cell content
                td[i].innerHTML = text;
                // unselect TD
                REDIPS.table.mark(false, td[i]);
            }
        }
    };
    

    Hope this code will be helpful. Cheers!

13. Thanks heaps! Immensely useful! :)

14. @Newbie – No problem and I’m glad my reply was helpful for you.

15. Keep the good job on

16. @Luca – Right now my free time is a bit limited, but I’ll try to continue working on this site. Thank you!

17. Great job dbunic ! Thank you.

    My problem is when i insert a row below another one by using “x / +” column.
    From example 24 (REDIPS_drag), click “+” adds a new row below ; but in my case, i would like to clone the current row, where it can be merged horizontally or vertically… Any idea to do that please ? :)

18. You already needed to persist table merge in some database?

19. Hello…
    First of all thanks for this great tool!!!

    can you help me?
    Related to example 24:
    After adding a new row, the last column “x / + ” permits the place of the objects while in the first one not.

    I understand that the sentence cancels the placement of objects, but this is possible just in the first row. The new ones.

    How can I persist this kind of class in the new rows?

    This is needed because the column “x/+” should remain empty always.

    Thanks for your help!
    Adolfo

20. solved with: lc.className = “redips-mark ignore”;

    Thanks!