JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div id="download-file" class="dialog">

  <div class="dialog-head">
    Save as
  </div>

  <div class="dialog-content">

    <div class="file">
      <p>File name:</p>
      <input type="text" name="text" class="downloadtext">
    </div>
    <!-- eo // file name -->

    <div class="location">
      <p>Location:</p>
      <select>
        <option value="1">/</option>
        <option value="2">/home</option>
        <option value="3" selected="selected">/home/guest</option>
      </select>
      <span class="save-icon"><i class="fa fa-floppy-o"></i></span>

    </div>
    <!-- eo // location -->

    <div class="list-files">

      <table>
        <thead>
          <tr>

            <td>Name</td>
            <td>Type</td>
            <td>Date Modified</td>

          </tr>

        </thead>

        <tbody class="download-table">
          <tr>
            <td><i class="fa fa-file"></i> <span>Budget by Region - Area Chart</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>
          <tr>
            <td><i class="fa fa-file"></i> <span>Budget to Actual Comparison by Region - Scatter Plot</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>
          <tr>
            <td><i class="fa fa-file"></i> <span>Sales by Country - Data Bar</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>
          <tr>
            <td><i class="fa fa-file"></i> <span>Top 20 Countries by Quantities - Bar Chart</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>

          <tr>
            <td><i class="fa fa-file"></i> <span>Top 5 Department Spend - Pie Chart</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>

        </tbody>


      </table>



    </div>
    <!-- eo // list-files -->




    <div class="buttons">

      <a href="#" class="primary button...

CSS

.list-files {
  background: #e9e9e9
}
.downloadtext {display:block;width:100%;}

JavaScript

$(function() {
      $('.download-table tr').each(function(i) {
        var $this = $(this)
        $this.click(function() {
          $('.downloadtext').val( $this.find('span').text() );
        });
      });
    });