javascript - 将值添加到 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>