Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Does anyone knows how to create a button that fill all text boxes within a table?

<table id="table-style" border="0" cellspacing="0" cellpadding="0">

<tbody><tr><td><button type="button" class="autofill">Fill</button>
</td>
<td></td>
<td></td>
<td></td>
</tr>

  <tr class="first">
  <td>
  <input type="text" name="textfield8" id="textfield8" value="test1">

    </td>
    <td>
      <input type="text" name="textfield2" id="textfield2" value="test2">
    </td>
    <td>
      <input type="text" name="textfield3" id="textfield3" value="">
    </td>
    <td>
      <input type="text" name="textfield4" id="textfield4" value="test4">
    </td>

  </tr>


  <tr>
    <td>
      <input type="text" name="textfield5" id="textfield5">
    </td>
    <td>
      <input type="text" name="textfield6" id="textfield6">
    </td>
    <td>
      <input type="text" name="textfield7" id="textfield7">
    </td>
    <td>
      <input type="text" name="textfield8" id="textfield8">
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" name="textfield9" id="textfield9">
    </td>
    <td>
      <input type="text" name="textfield10" id="textfield10">
    </td>
    <td>
      <input type="text" name="textfield11" id="textfield11">
    </td>
    <td>
      <input type="text" name="textfield12" id="textfield12">
    </td>
  </tr>


</tbody></table>

Hey Joe Boo,

Just wanted to let you know that I edited your markdown so that it renders correctly. You can refer to the Markdown Cheatsheet for how to post code to the forums or take a look at the following images:

code

code

2 Answers

Erik McClintock
Erik McClintock
45,783 Points

Joe,

You could do something like this with a couple lines of JavaScript.

1) You need to gain access to each input that you want to be able to interact with. The best/easiest way to do this would be to create an array that holds each input as a value, using JavaScript's .getElementsByClassName() function. Just add a class name to each of your input elements (make sure it's the same class name) and you'll be good to go to use this.

2) You need to create your button element in your HTML.

3) Just like the inputs, you'll need to gain access to that button element in order to bind an event to it that will trigger your inputs to fill. For this, you could use JavaScript's .getElementById() function.

4) Attach an event listener to the button to call the function that you'll write that will populate the inputs, using JavaScript's .addEventListener() function.

5) Create the function that will iterate over each element in the array that you created to hold all of your inputs (using a FOR or WHILE loop, for example), and for each one, set the current input's .value property (scroll down on that link to find the value property) equal to whatever you are wanting to fill them with.

For a quick, crude example, see this codepen that I created.

Erik

Hi Erik, Here is what I have:

     $(".autofill").click(function() {        
         getTableRowValue();     
      });




function getTableRowValue(){
    var $row =  $('tr').find('td > input');
      $row.each(function() {
               if( $(this).val() ) {
                  var textval = $(this).val(); // this will be the text of each <td>
                  alert(textval);
               } 
           });
    }

What I did here is to managed to grab the value of "tr" elements. but what I really need it to be doing is allow the user to fill in whatever data in a first row. Then click on "Fill All" button to apply the same answer the row below within that table. If that making any sense?

basically just grabbing value from the first row and apply it to row below.

If you're wanting to grab the data from one row and insert into the next, you can use the next() function to select the next table row since table rows are siblings of each other.