613288_de-DE

liliconcom

Erstellen Sie eine HTML-Tabelle aus JSL

Kürzlich musste ich ein Web-Scraping durchführen, um die Verfügbarkeit von Teilen herauszufinden. Ich habe JMP verwendet, um die Daten zu sichten und eine Webseite zu erstellen. Diese JSL ist eine vereinfachte Version dieses Webseitengenerators. Es erstellt ein HTML-Verzeichnis im $TEMP-Bereich Ihres Computers und fügt mithilfe von JMP-Maps einige Grafiken hinzu. Gleichzeitig baut es eine Datentabelle mit Links zu den Bildern auf.

Clicking the link in the data table opens another window; the table is moved back in front for this illustration.Ein Klick auf den Link in der Datentabelle öffnet ein weiteres Fenster; der Tisch wird für diese Darstellung wieder nach vorne gerückt.

Um eine hübsch aussehende Webseite zu erstellen, ging ich zu einer zufällig ausgewählten Website zur Generierung von Online-Tabellen, nahm einige Farbanpassungen vor und schnappte mir das CSS- und HTML-Beispiel, um es in die JSL einzufügen. Nach ein paar Minuten des Lernens schneide ich es auseinander, damit die sich wiederholenden Tabellenkörperlinien aus JSL erstellt werden können. Sie können das JSL unverändert ausführen und es öffnet einen Browser mit der dateibasierten Site in Ihrem Temp-Verzeichnis, oder Sie können diese hochgeladenen Dateien sehen, indem Sie das HTML-Verzeichnis in my ziehen github-Seite .

 

  
    State
    Detailed Earth
    NASA Server
    StreetMap Service
  


]\";
evenrow =
"\[
  
    ^dt:name[row()]^
    ^detail_earth^
    ^nasa_server^
    ^streetmap_service^
  
]\";
oddrow =
"\[  
  
    ^dt:name[row()]^
    ^detail_earth^
    ^nasa_server^
    ^streetmap_service^
  
]\";
trailer = "\[ 


]\";

// use a picture for the link, include the 2-letter state name as text in the link

abrev=["North Carolina"=>"NC", "Virginia"=>"VA","Kentucky"=>"KY","Tennessee"=>"TN"];
pic = Function( {url, txt, abr},
 Eval Insert( "\[// example web page creation
// step 0: make a place to keep the web site
htmlDir = "$temp/html/";
Delete Directory( htmlDir );
Create Directory( htmlDir );

// step 1, build a JMP table, pictures, links.
positions = {{"North Carolina", -84, -76, 33.5, 37}, {"Virginia", -83.4, -75.3, 36.1, 39.7}, {"Kentucky", -89.8, -81.4, 36, 39.6}, {"Tennessee", -90,-81.6, 34.2, 37.8}};
maps = {Images( "Detailed Earth" ), Images( "NASA server" ), Images( "Street Map Service", "Mapbox Light", "" )};
copyright = {"", "", "© Mapbox © OpenStreetMap"};
maptype = Function( {i}, Regex( Char( maps[i] ), "\!"([^\!"]*)", "\1" ) );//  text between the first two quotation marks - just the quoted string part

dtBC = Open( "$sample_data/big class.jmp" ); // not using the data in the maps, just need to open graph builder with a table

// this expression will be used in loops below to make graphs by substituting _backgroundimage_() and by using variables iPos and iMap
gbExpr = Expr(
 dtBC << Graph Builder( Size( 840 * 2, 411 * 2 ), Show Control Panel( 0 ), Show Legend( 0 ), Variables( X( :weight ), Y( :height ) ),
  Elements( Points( X, Y, Legend( 3 ) ), Smoother( X, Y, Legend( 4 ) ) ),
  SendToReport(
   Dispatch( {}, "Graph Builder", OutlineBox, {Set Title( "" ), Image Export Display( Normal )} ),
   Dispatch( {}, "weight", ScaleBox,
    {Scale( "Geodesic", {Compact Map( {Region( "United States" ), Alaska( 1 ), Hawaii( 1 ), Puerto Rico( 1 )} )} ), Format( "Best", 9 ),
    Min( positions[iPos][2] ), Max( positions[iPos][3] ), Inc( 2 ), Minor Ticks( 1 ), Label Row(
     {Show Major Labels( 0 ), Show Major Ticks( 0 ), Show Minor Ticks( 0 )}
    )}
   ),
   Dispatch( {}, "height", ScaleBox,
    {Scale( "Geodesic", {Compact Map( {Region( "United States" ), Alaska( 1 ), Hawaii( 1 ), Puerto Rico( 1 )} )} ),
    Min( positions[iPos][4] ), Max( positions[iPos][5] ), Inc( 0.5 ), Minor Ticks( 0 ), Label Row(
     {Show Major Labels( 0 ), Show Major Ticks( 0 ), Show Minor Ticks( 0 )} )} ),
   Dispatch( {}, "graph title", TextEditBox, {Set Text( positions[iPos][1] )} ),
   Dispatch( {}, "X title", TextEditBox, {Set Text( copyright[iMap] )} ),
   Dispatch( {}, "Y title", TextEditBox, {Set Text( "" )} ),
   Dispatch( {}, "Graph Builder", FrameBox,
    {Background Color( 60 ), Background Map( _backgroundimage_(), Boundaries( "US States" ) ), DispatchSeg( MapSeg( 1 ),
     {Clip Shape( Boundaries( "US States", ID( positions[iPos][1] ) ) )} )} )
  )
 )
);

// open a new table. Give it clickable columns within JMP.

dt = New Table( "places",
 addrows( N Items( positions ) ),
 New Column( "name", character ),
 New Column( maptype( 1 ),
  Character,
  "Nominal",
  Set Property(
   "Event Handler",
   Event Handler(
    Click( JSL Quote(Function( {thisTable, thisColumn, iRow}, {  },Web( Char( thisTable:thisColumn[ iRow ] ) ); );) ),
    Tip( JSL Quote(Function( {thisTable, thisColumn, iRow}, {  },"Open " || Char( thisTable:thisColumn[ iRow ] ) || " in browser."; );) ),
    Color( JSL Quote(Function( {thisTable, thisColumn, iRow}, {  },RGBColor("link"); );) )
   )
  )
 ),
 New Column( maptype( 2 ),
  Character,
  "Nominal",
  Set Property(
   "Event Handler",
   Event Handler(
    Click( JSL Quote(Function( {thisTable, thisColumn, iRow}, {  },Web( Char( thisTable:thisColumn[ iRow ] ) ); );) ),
    Tip( JSL Quote(Function( {thisTable, thisColumn, iRow}, {  },"Open " || Char( thisTable:thisColumn[ iRow ] ) || " in browser."; );) ),
    Color( JSL Quote(Function( {thisTable, thisColumn, iRow}, {  },RGBColor("link"); );) )
   )
  )
 ),
 New Column( maptype( 3 ),
  Character,
  "Nominal",
  Set Property(
   "Event Handler",
   Event Handler(
    Click( JSL Quote(Function( {thisTable, thisColumn, iRow}, {  },Web( Char( thisTable:thisColumn[ iRow ] ) ); );) ),
    Tip( JSL Quote(Function( {thisTable, thisColumn, iRow}, {  },"Open " || Char( thisTable:thisColumn[ iRow ] ) || " in browser."; );) ),
    Color( JSL Quote(Function( {thisTable, thisColumn, iRow}, {  },RGBColor("link"); );) )
   )
  )
 )
);

// loop over states and map types to fill in the table

For( iPos = 1, iPos <= N Items( positions ), iPos += 1,
 dt:name[iPos] = positions[iPos][1];
 For( iMap = 1, iMap <= N Items( maps ), iMap += 1,
  gb = Eval( Substitute( Name Expr( gbExpr ), Expr( _backgroundimage_() ), maps[iMap] ) );
  img = gb << getpicture;
  path = htmlDir || Regex( positions[iPos][1] || maptype( iMap ), " ", "", globalreplace ) || ".jpg";
  img << savepicture( path, "jpg" );
  Column( dt, maptype( iMap ) )[iPos] = path;
  gb << closewindow;
 );
);

// at this point, the data table has clickable links. But there is no option to save it as HTML.
// visit https://www.tablesgenerator.com/html_tables to make a style sheet for a table of 4 columns, paste it here.
// mostly we need the style sheet, but we also need to see how the styles connect to the html elements.
// carve it up into snips of JSL that can be reused:

style =
"\[
<STYLE type="text/css">
.tg  {border:none;border-collapse:collapse;border-color:#9ABAD9;border-spacing:0;}
.tg td{background-color:#EBF5FF;border-color:#9ABAD9;border-style:solid;border-width:0px;color:#444;
  font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{background-color:#409cff;border-color:#9ABAD9;border-style:solid;border-width:0px;color:#fff;
  font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-phtq{background-color:#D2E4FC;border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-f8tv{border-color:inherit;font-style:italic;text-align:left;vertical-align:top}
.tg .tg-6gib{background-color:#D2E4FC;border-color:inherit;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-fymr{border-color:inherit;font-weight:bold;text-align:left;vertical-align:top}
</STYLE>
]\";
header =
"\[

^abr^]\" ) ); // split the path name into overlapping txt and url parts pat = Pat Arb() + "html/" + (Pat Break( "." ) >> txt + Pat Rem()) >> url; // url is the whole value, txt is just the remainder after "html/" // url include .jpg extension. txt is for display and does not show extension // assemble the html body text into a long string bodytext = style || header; For Each Row( dt, Pat Match( dt:"detailed earth"n[Row()], pat ); detail_earth = Eval Insert( "\[^pic(url,txt,abrev[dt:name[row()]])^]\" ); Pat Match( dt:"nasa server"n[Row()], pat ); nasa_server = Eval Insert( "\[^pic(url,txt,abrev[dt:name[row()]])^]\" ); Pat Match( dt:"street map service"n[Row()], pat ); streetmap_service = Eval Insert( "\[^pic(url,txt,abrev[dt:name[row()]])^]\" ); bodytext ||= Eval Insert( If( Mod( Row(), 2 ) == 0, evenrow, oddrow ) ); ); bodytext ||= trailer; // wrap the rest of the web page around the body text html = Eval Insert( "\[ Pictures of States ^bodytext^ ]\" ); // save and display file = Save Text File( htmlDir || "states.html", html ); Web( file );

Verwenden von JMP zum Erstellen einer HTML-Tabelle aus einer Datentabelle.