title: Java script open link in a div or iframe
body: <p>I have a dynamic list and I want base on the list field if is "0" the use gets popup message and if it is greater than "0" to go to next page in div/or <code>iframe</code> so it stays in the same page just add something to the screen.</p>
  
  <p>Here what I have so far, I'm using flask, and I am a new to this so I need very clear instaction.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
      window.location = "allocate2";
      $(this).target("window2");
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #EEE;
    font-family: Helvetica, Arial, sans-serif;
  }
  
  a {
    text-decoration: none;
    color: red;
  }
  
  a:hover {
    background-color: black;
    color: white;
  }
  
  tr:hover {
    cursor: pointer;
    background-color: red;
    color: white;
  }
  
  h1 {
    margin: 0;
  }
  
  #container {
    background-color: white;
    width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
  
  #header {
    background-color: #66ccff;
    color: white;
    text-align: center;
  }
  
  #content {
    padding: 10px 10px 10px;
  }
  
  #nav {
    width: 200px;
    float: left;
  }
  
  #nav ul {
    list-style-type: none;
    padding: 0;
  }
  
  #nav.selected {
    font-weight: bold;
    color: #EEE;
  }
  
  #main {
    width: 600px;
    float: center;
  }
  
  #window2 {
    width: 40px;
    float: right;
  }
  
  #footer {
    clear: both;
    padding: 10px;
    background-color: #999999;
    color: weight;
    text-align: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="container"&gt;
      &lt;div id="header"&gt;
        &lt;h1&gt;&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;
        &lt;div id="nav"&gt;
          &lt;h3&gt;Menu&lt;/h3&gt;
          &lt;ul id="mymenu"&gt;
            &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id="main"&gt;
          &lt;h1&gt;IP Alocation&lt;/h1&gt;
          &lt;table style="width:45%" border="1"&gt;
            &lt;tr&gt;
              &lt;th&gt;No&lt;/th&gt;
              &lt;th&gt;Subnet&lt;/th&gt;
              &lt;th&gt;%&lt;/th&gt;
              &lt;th&gt;Subnet left&lt;/th&gt;
            &lt;/tr&gt;
            {% for l in available_address_list %}
            &lt;tr id="tablerow" class='clickable-row'&gt;
              {% for item in l %}
              &lt;td&gt; {{ item }} &lt;/td&gt;
              {% endfor %}
            &lt;/tr&gt;
            {% endfor %}
  
          &lt;/table&gt;
        &lt;/div&gt;
        &lt;iframe name="window2" src="" width="100%" height="100%" frameBorder="0"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
        Copyright &amp;copy; 2018 Issa Daniel
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>Thanks and good day.</em></p>