简体   繁体   中英

Dynamically setting the input value with jQuery

I have a spreadsheet of data and input fields.

When the input field is empty, it should click the copy text button from the row with class "shipdate". I always copy the entry in the code. Can anyone tell me where I'm wrong.

This is my code

 $(".btn-yes").click(function() { var $val = $(document).find('.date'); $('.date').each(function() { var $val = $(this).val(); if ($val === "") { $('tr').each(function() { var $this = $(this), daata = $this.find('td.shipdate').html(); $this.find('input').val(anData); }) } else( console.log("empty") ) }) })
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <table> <thead> <tr> <th>Example1</th> <th>Example2</th> <th>Example3</th> <th>Example4</th> </tr> </thead> <tbody> <tr> <td> text1</td> <td> text2 </td> <td> <input type="text" value="" class="date" /> </td> <td class="shipdate"> 31.10.2019.</td> </tr> <tr> <td> text1</td> <td> text2 </td> <td> <input type="text" value="" class="date" /> </td> <td class="shipdate"> 31.10.2019.</td> </tr> <tr> <td> text1</td> <td> text2 </td> <td> <input type="text" value="" class="date" /> </td> <td class="shipdate"> 31.10.2019.</td> </tr> <tr> <td> text1</td> <td> text2 </td> <td> <input type="text" value="" class="date" /> </td> <td class="shipdate"> 31.10.2019.</td> </tr> </tbody> </table> <div> <button class="btn-yes"> Click here </button> </div> </div>

You likely meant this. Note I had to trim and remove the trailing dot in the shipdate

You can remove the.slice(0,-1) if the shipdate cell contains a date without a trailing dot

You can also freely change $(this).parent().next().text() to $(this).closest("tr").find(".shipdate").text() in case you want to move the cells around

 $(".btn-yes").click(function() { $('.date').each(function() { var $val = $(this).val(); var shipdate = $.trim($(this).parent().next().text()).slice(0,-1) $(this).val($val === ""? shipdate: $val) }) })
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <table> <thead> <tr> <th>Example1</th> <th>Example2</th> <th>Example3</th> <th>Example4</th> </tr> </thead> <tbody> <tr> <td> text1</td> <td> text2 </td> <td> <input type="text" value="" class="date" /> </td> <td class="shipdate"> 31.10.2019.</td> </tr> <tr> <td> text1</td> <td> text2 </td> <td> <input type="text" value="" class="date" /> </td> <td class="shipdate"> 31.10.2019.</td> </tr> <tr> <td> text1</td> <td> text2 </td> <td> <input type="text" value="" class="date" /> </td> <td class="shipdate"> 31.10.2019.</td> </tr> <tr> <td> text1</td> <td> text2 </td> <td> <input type="text" value="" class="date" /> </td> <td class="shipdate"> 31.10.2019.</td> </tr> </tbody> </table> <div> <button class="btn-yes"> Click here </button> </div> </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM