0

I am struggling to figure out the best way to do this. I think modal is involved.

I have a dynamically resizing table. When I click on the row, I want it to add a row below with info from a php file. PHP file will include details and maybe associated charts. The PHP file will be the same for all rows and call on the row data to populate associated info. Ideally I'd want to be able to expand multiple, but one at a time would be perfect for now.

Ideal concept of operations: 1. Click on row 3 (NFLX) 2. Row 3 moves to the top of the page (I figured this out already) 3. Create a row below NFLX row 3 and populate with spreadInfo.php?variables 4. Click on row 2 (IBB) 5. Collapse NFLX info tab 6. Create a row below IBB row 2 and populate with spreadInfo.php?variables

Here's the fiddle I've started on: https://jsfiddle.net/wolfpack06/w76ezpfq/

Before click: Before state

After clicking IBB first row: After State

    <style type="text/css">
    #formatscreen {
      font-family: Arial;
      width: 790px;
      border-collapse: collapse;
    }

    th {
      background: black;
      color: white;
      font-size: 20px;
    }

    th,
    td {
      border: 1px solid #000;
      border-bottom: 2px solid #fff;
      //  padding-left: 5px;
      //  padding-right: 5px;
    }

    #screen_symbol {
      font-size: 40px;
      font-weight: bold;
      text-align: center;
    }

    #screen_price {
      font-size: 32px;
      font-weight: bold;
    }

    #screen_net_pct {
      font-size: 24px;
      font-weight: bold;
    }

    #screen_expiry.header,
    #screen_type.header,
    #screen_dist.header,
    #screen_short_leg.header,
    #screen_long_leg.header {
      font-size: 20px;
    }

    #screen_change.header,
    #screen_delta.header,
    #screen_short_leg_vol.header,
    #screen_long_leg_vol.header,
    #screen_net.header {
      font-size: 14px;
    }

    #screen_expiry,
    #screen_type,
    #screen_dist,
    #screen_short_leg,
    #screen_long_leg {
      font-size: 24px;
    }

    #screen_change{
      display: inline-block
    }

    #screen_change,
    #screen_delta,
    #screen_short_leg_vol,
    #screen_long_leg_vol,
    #screen_net {
      font-size: 16px;
    }

    @media only screen and (max-device-width: 480px),
    (max-width:800px) {
      #formatscreen {
        width: 100%;
      }
      th {
        font-size: 2.5vw;
      }
      #screen_symbol {
        font-size: 5vw;
      }
      #screen_price {
        font-size: 4vw;
      }
      #screen_net_pct {
        font-size: 3vw;
      }
      #screen_expiry.header,
      #screen_type.header,
      #screen_dist.header,
      #screen_short_leg.header,
      #screen_long_leg.header {
        font-size: 2.5vw;
      }
      #screen_change.header,
      #screen_delta.header,
      #screen_short_leg_vol.header,
      #screen_long_leg_vol.header,
      #screen_net.header {
        font-size: 1.75vw;
      }
      #screen_expiry,
      #screen_type,
      #screen_dist,
      #screen_short_leg,
      #screen_long_leg {
        font-size: 3vw;
      }
      #screen_change,
      #screen_delta,
      #screen_short_leg_vol,
      #screen_long_leg_vol,
      #screen_net {
        font-size: 2vw;
      }
    }

    #screen_change.up {
      background: green;
      color: white;
    }

    #screen_change.down {
      background: red;
      color: white;
    }

    .center {
      text-align: center;
    }

    .right {
      text-align: right;
    }

    tr[data-bau="Bull Put"] {
      background: #99ff99;
    }

    tr[data-bau="Bear Call"] {
      background: #ff9999;
    }

    tr:hover[data-bau="Bull Put"] {
      background-color: #00b300;
      cursor: pointer;
    }

    tr:hover[data-bau="Bear Call"] {
      background-color: #ff0000;
      cursor: pointer;
    }

            </style>

    <div id="prescreen">
      <table id="formatscreen">
        <tr>
          <th>Symbol</th>
          <th>Price Action</th>
          <th>Expiry Date
            <br>Type</th>
          <th class="right">
            <div id="screen_dist" class="header">Distance</div>
            <div id="screen_delta" class="header">Delta</div>
          </th>
          <th class="right">
            <div id="screen_short_leg" class="header">Short Leg</div>
            <div id="screen_short_leg_vol" class="header">Volume</div>
          </th>
          <th class="right">
            <div id="screen_long_leg" class="header">Long Leg</div>
            <div id="screen_long_leg_vol" class="header">Volume</div>
          </th>
          <th>Return</th>
        </tr>
        <tr data-bau="Bull Put">
          <td>
            <div id="screen_symbol">IBB</div>
          </td>
          <td class="center">
            <div id="screen_price">$1260.39</div>
            <div id="screen_change" class="down">-$12.36 (0.91%)</div>
          </td>
          <td class="center">
            <div id="screen_expiry">20160819</div>
            <div id="screen_type">Bull Put</div>
          </td>
          <td class="right">
            <div id="screen_dist">15.5%</div>
            <div id="screen_delta">0.077</div>
          </td>
          <td class="right">
            <div id="screen_short_leg">$1220.00</div>
            <div id="screen_short_leg_vol">1420</div>
          </td>
          <td class="right">
            <div id="screen_long_leg">$1915.00</div>
            <div id="screen_short_leg_vol">20</div>
          </td>
          <td class="right">
            <div id="screen_net_pct">3.00%</div>
            <div id="screen_net">$0.25</div>
          </td>
        </tr>
            <tr data-bau="Bull Put">
          <td>
            <div id="screen_symbol">IBB</div>
          </td>
          <td class="center">
            <div id="screen_price">$1260.39</div>
            <div id="screen_change" class="down">-$12.36 (0.91%)</div>
          </td>
          <td class="center">
            <div id="screen_expiry">20160819</div>
            <div id="screen_type">Bull Put</div>
          </td>
          <td class="right">
            <div id="screen_dist">15.5%</div>
            <div id="screen_delta">0.077</div>
          </td>
          <td class="right">
            <div id="screen_short_leg">$1220.00</div>
            <div id="screen_short_leg_vol">1420</div>
          </td>
          <td class="right">
            <div id="screen_long_leg">$1915.00</div>
            <div id="screen_short_leg_vol">20</div>
          </td>
          <td class="right">
            <div id="screen_net_pct">3.00%</div>
            <div id="screen_net">$0.25</div>
          </td>
        </tr>
        <tr data-bau="Bear Call">
          <td>
            <div id="screen_symbol">NFLX</div>
          </td>
          <td class="center">
            <div id="screen_price">$1260.39</div>
            <div id="screen_change" class="up">+$12.36 (0.91%)</div>
          </td>
          <td class="center">
            <div id="screen_expiry">20160819</div>
            <div id="screen_type">Bull Put</div>
          </td>
          <td class="right">
            <div id="screen_dist">15.5%</div>
            <div id="screen_delta">0.077</div>
          </td>
          <td class="right">
            <div id="screen_short_leg">$1220.00</div>
            <div id="screen_short_leg_vol">20</div>
          </td>
          <td class="right">
            <div id="screen_long_leg">$1915.00</div>
            <div id="screen_short_leg_vol">20</div>
          </td>
          <td class="right">
            <div id="screen_net_pct">3.00%</div>
            <div id="screen_net">$0.25</div>
          </td>
        </tr>
        <tr data-bau="Bull Put">
          <td>
            <div id="screen_symbol">IBB</div>
          </td>
          <td class="center">
            <div id="screen_price">$1260.39</div>
            <div id="screen_change" class="down">-$12.36 (0.91%)</div>
          </td>
          <td class="center">
            <div id="screen_expiry">20160819</div>
            <div id="screen_type">Bull Put</div>
          </td>
          <td class="right">
            <div id="screen_dist">15.5%</div>
            <div id="screen_delta">0.077</div>
          </td>
          <td class="right">
            <div id="screen_short_leg">$1220.00</div>
            <div id="screen_short_leg_vol">1420</div>
          </td>
          <td class="right">
            <div id="screen_long_leg">$1915.00</div>
            <div id="screen_short_leg_vol">20</div>
          </td>
          <td class="right">
            <div id="screen_net_pct">3.00%</div>
            <div id="screen_net">$0.25</div>
          </td>
        </tr>
        <tr data-bau="Bear Call">
          <td>
            <div id="screen_symbol">NFLX</div>
          </td>
          <td class="center">
            <div id="screen_price">$1260.39</div>
            <div id="screen_change" class="up">+$12.36 (0.91%)</div>
          </td>
          <td class="center">
            <div id="screen_expiry">20160819</div>
            <div id="screen_type">Bull Put</div>
          </td>
          <td class="right">
            <div id="screen_dist">15.5%</div>
            <div id="screen_delta">0.077</div>
          </td>
          <td class="right">
            <div id="screen_short_leg">$1220.00</div>
            <div id="screen_short_leg_vol">20</div>
          </td>
          <td class="right">
            <div id="screen_long_leg">$1915.00</div>
            <div id="screen_short_leg_vol">20</div>
          </td>
          <td class="right">
            <div id="screen_net_pct">3.00%</div>
            <div id="screen_net">$0.25</div>
          </td>
        </tr>
        <tr data-bau="Bull Put">
          <td>
            <div id="screen_symbol">IBB</div>
          </td>
          <td class="center">
            <div id="screen_price">$1260.39</div>
            <div id="screen_change" class="down">-$12.36 (0.91%)</div>
          </td>
          <td class="center">
            <div id="screen_expiry">20160819</div>
            <div id="screen_type">Bull Put</div>
          </td>
          <td class="right">
            <div id="screen_dist">15.5%</div>
            <div id="screen_delta">0.077</div>
          </td>
          <td class="right">
            <div id="screen_short_leg">$1220.00</div>
            <div id="screen_short_leg_vol">1420</div>
          </td>
          <td class="right">
            <div id="screen_long_leg">$1915.00</div>
            <div id="screen_short_leg_vol">20</div>
          </td>
          <td class="right">
            <div id="screen_net_pct">3.00%</div>
            <div id="screen_net">$0.25</div>
          </td>
        </tr>
        <tr data-bau="Bear Call">
          <td>
            <div id="screen_symbol">NFLX</div>
          </td>
          <td class="center">
            <div id="screen_price">$1260.39</div>
            <div id="screen_change" class="up">+$12.36 (0.91%)</div>
          </td>
          <td class="center">
            <div id="screen_expiry">20160819</div>
            <div id="screen_type">Bull Put</div>
          </td>
          <td class="right">
            <div id="screen_dist">15.5%</div>
            <div id="screen_delta">0.077</div>
          </td>
          <td class="right">
            <div id="screen_short_leg">$1220.00</div>
            <div id="screen_short_leg_vol">20</div>
          </td>
          <td class="right">
            <div id="screen_long_leg">$1915.00</div>
            <div id="screen_short_leg_vol">20</div>
          </td>
          <td class="right">
            <div id="screen_net_pct">3.00%</div>
            <div id="screen_net">$0.25</div>
          </td>
        </tr>
      </table>
      words words
    </div>
Alex
  • 127
  • 1
  • 10
  • We can help with an issue you are having or an error message as long as you have a basic understanding of the code. You did not post any PHP code here. You appear to be asking others to do work for you. There are plenty of freelance sites that you can use to hire someone to code for you. – Jim Jul 07 '16 at 20:47
  • I have PHP code, but it doesn't work in jsfiddle since jsfiddle doesn't support PHP. I'll update the original post with the file I have so far. Only problem is that it's already made up for probably 4-5 files you'd all need to make the code work. I was really hoping for some direction like "oh yeah, use AJAX and model... here's a link "LINK" – Alex Jul 07 '16 at 20:58
  • There are a number of sites that accept PHP code and work similar to JSFiddle: http://stackoverflow.com/questions/4616159/is-there-a-php-sandbox-something-like-jsfiddle-is-to-js – Jim Jul 07 '16 at 21:00
  • Ok, I'm working now to dumb down my code so I can post it on here without errors and without posting in mysqli code and all the supporting css and js. – Alex Jul 07 '16 at 21:05

0 Answers0