0

I am attempting to replace a table with divs so that it can display alright on a mobile device, here is the code so far.

            $dom = new DOMDocument();
            libxml_use_internal_errors(true);
            $dom->strictErrorChecking = false;
            $dom->loadHTML($this->html);
            $divID = 0;

            foreach ($dom->getElementsByTagName('table') as $table) {
                // for each table grab all rows
                $rows = array();
                $tableDiv = $dom->createElement('div');
                $tableDiv->setAttribute('style', 'width: 95%; clear: both; margin: auto;');
                $tableDiv->setAttribute('id', 'mobileTableGen_' . $divID . '_' . $page->name);
                $divID++;

                foreach ($table->getElementsByTagName('tr') as $row) {
                    $rows[] = $row;
                }

                foreach ($rows as $row) {
                    $cols = array();
                    foreach ($row->childNodes as $col) {
                        if ($col->nodeType != 3)
                            $cols[] = $col;
                    }

                    $numCols = count($cols);
                    $width = 100 / $numCols;

                    $rowDiv = $dom->createElement('div');
                    $rowDiv->setAttribute('style', 'clear: both; width: 100%;');
                    $rowDiv->setAttribute('id', 'mobileTableGen_' . $divID . '_' . $page->name);
                    $divID++;

                    foreach ($cols as $col) {
                        $div = $dom->createElement('div');
                        $div->setAttribute('style', 'width: ' . $width . '%; float: left;');
                        $div->setAttribute('id', 'mobileTableGen_' . $divID . '_' . $page->name);
                        $divID++;

                        foreach ($col->childNodes as $child) {
                            $div->appendChild($child);
                        }
                        $rowDiv->appendChild($div);
                    }
                    $tableDiv->appendChild($rowDiv);
                }
                $table->parentNode->replaceChild($tableDiv, $table);
            }
            $this->html = $dom->saveHTML();

The issue is at this line: $div->appendChild($child);

The child is always blank, but I can get the nodeValue just fine. So I can get the text of each cell from the table, but I am unable to get any html elements that are children of the nodes.

I tried replacing all the foreach with the equivalent for loop, having read that foreach loops on DOMNode objects can cause issues, but that produced the same result.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
noub
  • 103
  • 1
  • 6
  • 1
    You're loading your page, getting the table, rewriting it to a div, and then displaying it? Is there a particular reason why you don't just change whatever generates the table to use a DIV instead? – Colin M Mar 18 '13 at 19:39
  • The tables are not generated, but rather are static html that is stored in our database. We have a proprietary CMS. – noub Mar 18 '13 at 19:40
  • 1
    You could _style_ the tables to not appear as such. `` is just a tag with some default styling.
     – John Dvorak Mar 18 '13 at 19:41
  • Cells will extend to fit the width of the content regardless of what you set the width to, so I cannot do that...I wish =/ – noub Mar 18 '13 at 19:44
  • 1
    @noub: http://stackoverflow.com/questions/4457506/css-how-to-set-the-table-column-width-constant-regardless-of-the-amount-of-text (CSS: How to set the table column width constant regardless of the amount of text in its cells?) – Greg Mar 18 '13 at 20:21
  • @Greg: I'll try this out, and see if I can get this to work. I'll still have to parse the html because I will not know ahead of time what the cell widths should be, but this seems promising. – noub Mar 18 '13 at 21:11

0 Answers0