javascript - 如何重复相同的值直到最后一个文本框？

Question

我计划将双击的文本框值重复到文本框的末尾。我的表单包含十个具有 10 个不同值的文本框。如果我单击第三个文本框，第三个文本框的值应该重复到第 10 个文本框。但 2 和 1st 文本框保留相同的值。我在 codepen 中包含代码，请找到以下链接。

http://codepen.io/nachicode/pen/dXKaaA/

代码片段:

HTML

<table>
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="1" />
    </td>
    <td>
      <input Type="text" Value="1" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="2" />
    </td>
    <td>
      <input Type="text" Value="2" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="3" />
    </td>
    <td>
      <input Type="text" Value="3" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="4" />
    </td>
    <td>
      <input Type="text" Value="4" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="5" />
    </td>
    <td>
      <input Type="text" Value="5" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="6" />
    </td>
    <td>
      <input Type="text" Value="6" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="7" />
    </td>
    <td>
      <input Type="text" Value="7" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="8" />
    </td>
    <td>
      <input Type="text" Value="8" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="9" />
    </td>
    <td>
      <input Type="text" Value="9" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="10" />
    </td>
    <td>
      <input Type="text" Value="10" />
    </td>

  </tr>
</table>

JQUERY

$(document).ready(function() {
  $("input").dblclick(function() {
    //Code here
  });
});

Answer 1

一种方法如下:

// select all <input> elements within a <td> element,
// bind the anonymous function of the on() method as
// the 'dblclick' event-handler:
$('td input').on('dblclick', function() {

  // find the ancestor <tr> or the dblclick-ed element:
  var currentRow = $(this).closest('tr'),

    // get all subsequent siblings of the current <tr>,
    // and add the current <tr> back to that selection
    // with addBack():
    laterSiblingRows = currentRow.nextAll().addBack(),

    // find relevant <input> elements within the <tr>
    // elements:
    laterInputs = laterSiblingRows.find('input');

  // update the value of those <input> elements to
  // the value of the dblclick-ed element:
  laterInputs.val(this.value);
})

$('td input').on('dblclick', function() {
  var currentRow = $(this).closest('tr'),
    laterSiblingRows = currentRow.nextAll().addBack(),
    laterInputs = laterSiblingRows.find('input');

  laterInputs.val(this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="1" />
    </td>
    <td>
      <input Type="text" Value="1" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="2" />
    </td>
    <td>
      <input Type="text" Value="2" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="3" />
    </td>
    <td>
      <input Type="text" Value="3" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="4" />
    </td>
    <td>
      <input Type="text" Value="4" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="5" />
    </td>
    <td>
      <input Type="text" Value="5" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="6" />
    </td>
    <td>
      <input Type="text" Value="6" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="7" />
    </td>
    <td>
      <input Type="text" Value="7" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="8" />
    </td>
    <td>
      <input Type="text" Value="8" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="9" />
    </td>
    <td>
      <input Type="text" Value="9" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="10" />
    </td>
    <td>
      <input Type="text" Value="10" />
    </td>

  </tr>
</table>

JS Fiddle .

引用资料:

• > addBack() .
• > find() .
• > nextAll() .
• > on() .
• > val() .