将值添加到html表中下拉更改时的下一个和上一个文本框

Question

我试图在同一行的下拉列表更改时将数据值添加到上一个输入和下一个输入，但是无法在下拉列表更改中添加值输入文本框，正在使用它从sqlite中添加值（当前使用）变量以将值添加到文本框。

DEMO

HTML：

   <table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border">
        <tbody>
            <tr>
                <td class="Second">
                    <input type="text" name="renewal1" id="renewal1">
                </td>
                <td class="third">
                    <select class="dd" name="Phonenumberdd1" id="Phonenumberdd1">
                        <option value="Select">Select a Option</option>
                        <option value="asd">asd</option>
                        <option value="243">243</option>
                        <option value="test 1 3 ">test 1 3</option>
                    </select>
                </td>
                <td class="forth">
                    <input type="text" name="renewal_by1" id="renewal_by1">
                </td>
                <td class="fifth">
                    <input type="text" name="Renivaul_to1" id="Renivaul_to1" value="">
                </td>
            </tr>
            <tr>
                <td class="Second">
                    <input type="text" name="renewal2" id="renewal2">
                </td>
                <td class="third">
                    <select class="dd" name="Phonenumberdd2" id="Phonenumberdd2">
                        <option value="Select">Select a Option</option>
                        <option value="asd">asd</option>
                        <option value="243">243</option>
                        <option value="test 1 3 ">test 1 3</option>
                    </select>
                </td>
                <td class="forth">
                    <input type="text" name="renewal_by2" id="renewal_by2">
                </td>
                <td class="fifth">
                    <input type="text" name="Renivaul_to2" id="Renivaul_to2" value="">
                </td>
            </tr>
            <tr>
                <td class="Second">
                    <input type="text" name="renewal3" id="renewal3">
                </td>
                <td class="third">
                    <select class="dd" name="Phonenumberdd3" id="Phonenumberdd3">
                        <option value="Select">Select a Option</option>
                        <option value="asd">asd</option>
                        <option value="243">243</option>
                        <option value="test 1 3 ">test 1 3</option>
                    </select>
                </td>
                <td class="forth">
                    <input type="text" name="renewal_by3" id="renewal_by3">
                </td>
                <td class="fifth">
                    <input type="text" name="Renivaul_to3" id="Renivaul_to3" value="">
                </td>
            </tr>
            <tr>
                <td class="Second">
                    <input type="text" name="renewal4" id="renewal4">
                </td>
                <td class="third">
                    <select class="dd" name="Phonenumberdd4" id="Phonenumberdd4">
                        <option value="Select">Select a Option</option>
                        <option value="asd">asd</option>
                        <option value="243">243</option>
                        <option value="test 1 3 ">test 1 3</option>
                    </select>
                </td>
                <td class="forth">
                    <input type="text" name="renewal_by4" id="renewal_by4">
                </td>
                <td class="fifth">
                    <input type="text" name="Renivaul_to4" id="Renivaul_to4" value="">
                </td>
            </tr>
        </tbody>
    </table>

JS：

  $('#productanddates tr').on('change','[class="dd"]', function(e) {
      var data ="dummy data";
      $(this).prev('td input').val(data);
      $(this).next('td input').val(data);
   });

Answer 1

尝试使用parent和children这段代码片段。

  $('#productanddates tr').on('change', '.dd', function(e) { var data = "dummy data"; $(this).parent('td').prev('td').children('input').val(data); $(this).parent('td').nextAll('td').children('input').val(data); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tbody> <tr> <td class="Second"> <input type="text" name="renewal1" id="renewal1"> </td> <td class="third"> <select class="dd" name="Phonenumberdd1" id="Phonenumberdd1"> <option value="Select">Select a Option</option> <option value="asd">asd</option> <option value="243">243</option> <option value="test 1 3 ">test 1 3</option> </select> </td> <td class="forth"> <input type="text" name="renewal_by1" id="renewal_by1"> </td> <td class="fifth"> <input type="text" name="Renivaul_to1" id="Renivaul_to1" value=""> </td> </tr> <tr> <td class="Second"> <input type="text" name="renewal2" id="renewal2"> </td> <td class="third"> <select class="dd" name="Phonenumberdd2" id="Phonenumberdd2"> <option value="Select">Select a Option</option> <option value="asd">asd</option> <option value="243">243</option> <option value="test 1 3 ">test 1 3</option> </select> </td> <td class="forth"> <input type="text" name="renewal_by2" id="renewal_by2"> </td> <td class="fifth"> <input type="text" name="Renivaul_to2" id="Renivaul_to2" value=""> </td> </tr> <tr> <td class="Second"> <input type="text" name="renewal3" id="renewal3"> </td> <td class="third"> <select class="dd" name="Phonenumberdd3" id="Phonenumberdd3"> <option value="Select">Select a Option</option> <option value="asd">asd</option> <option value="243">243</option> <option value="test 1 3 ">test 1 3</option> </select> </td> <td class="forth"> <input type="text" name="renewal_by3" id="renewal_by3"> </td> <td class="fifth"> <input type="text" name="Renivaul_to3" id="Renivaul_to3" value=""> </td> </tr> <tr> <td class="Second"> <input type="text" name="renewal4" id="renewal4"> </td> <td class="third"> <select class="dd" name="Phonenumberdd4" id="Phonenumberdd4"> <option value="Select">Select a Option</option> <option value="asd">asd</option> <option value="243">243</option> <option value="test 1 3 ">test 1 3</option> </select> </td> <td class="forth"> <input type="text" name="renewal_by4" id="renewal_by4"> </td> <td class="fifth"> <input type="text" name="Renivaul_to4" id="Renivaul_to4" value=""> </td> </tr> </tbody> </table> 

Answer 2

您在那做错了。 选择的事件附件有些混乱，您可以通过以下更好的方法来完成：

$('#productanddates tr').on('change','.dd', function(e) {
    var data ="dummy data";
    $(this).closest('td').prev().find('input').val(data);
    $(this).closest('td').next().find('input').val(data);
});

要查找上一个和下一个输入，您需要首先使用closest找到select的父级，然后使用上prev/next向后/向前导航，然后find input 。

演示

---

更新

要获取该行中的所有文本框，您可以按以下步骤操作：

$('#productanddates tr').on('change','.dd', function(e) {
    var data ="dummy data";
    $(this).closest('td').prevAll().find('input').val(data);
    $(this).closest('td').nextAll().find('input').val(data);
});

开始使用nextAll和prevAll

演示

Answer 3

希望这可以帮助

$('#productanddates tr').on('change','[class="dd"]', function(e) {
    var data = $(this).val();
    var $tr = $(this).closest('tr');
    $tr.find('td:nth-child(1) input').val(data);
    $tr.find('td:nth-child(3) input').val(data);    
 });