• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 184
  • Last Modified:

Inserting a break in jquery

I have this code that breaks a table for mobile device what I am trying to accomplish is having a break or line feed between each row.  Any help with this is greatly appreciated.  Thanks
$(document).ready(function StripTable() {
if (screen.width > 800) {  // Windows 7 phone is 480px wide; if screen size is less than 800 best to have one column
    //Detected mobile else desktop
        $("td").each(function () {
            $(this).replaceWith("<div id=\"" + $(this).attr("id") + "\">" + $(this).html() + "</div>")

        });
        $("tr").each(function () {
            $(this).replaceWith("<div id=\"" + $(this).attr("id") + "\">" + $(this).html() + "</div>")
        });
        $("table").each(function () {
            $(this).replaceWith("<div id=\"" + $(this).attr("id") + "\">" + $(this).html() + "</div>")

        });
        // other option is to add row for every element in the table, 
        //      but then blank rows will be inserted when natural new row occurs
        
    }
});

Open in new window

0
zrazak
Asked:
zrazak
  • 4
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
So if you have
<table id="table1">
<tr id="row1">
  <td id="r1cell1">Row 1 cell 1</td>
  <td id="r1cell2">Row 1 cell 2</td>
</tr>
<tr id="row2">
  <td id="r2cell1">Row 2 cell 1</td>
  <td id="r2cell2">Row 2 cell 2</td>
</tr>
</table>

you will get

<div id="table1">
<div id="row1">
  <div id="r1cell1">Row 1 cell 1</div>
  <div id="r1cell2">Row 1 cell 2</div>
</div>
<div id="row2">
  <div id="r2cell1">Row 2 cell 1</div>
  <div id="r2cell2">Row 2 cell 2</div>
</div>
</div>

you hope?

Then why have a table at all?



0
 
zrazakAuthor Commented:
This will allow to break a table of original website to not be of tabular form.  Thus a check will check if mobile device and runs code to render the table to display properly for mobile devices.  Since mobile does not display table well.
0
 
Michel PlungjanIT ExpertCommented:
so what exactly is the problem?

$("tr").each(function () {
            $(this).replaceWith("<div id=\"" + $(this).attr("id") + "\">" + $(this).html() + "</div><br style=\"clear:all\" />")
        });
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Michel PlungjanIT ExpertCommented:
0
 
zrazakAuthor Commented:
Mplungjan can you explain this
0
 
Michel PlungjanIT ExpertCommented:
can I explain what?

I just added a break to your script after each row
0
 
zrazakAuthor Commented:
some good info but not complete
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now