Question

我打算将双击的文本框值重复到文本框的结尾。我的表单包含十个文本框，包含10个不同的值。如果我单击第三个文本框，则第三个文本框的值应重复到第10个文本框。但是2和第一个文本框保留相同的值。我在codepen中包含代码，请找到以下链接。

代码段：

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);
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

JS Fiddle

参考文献：

Answer 2

试试这个：

$("input").dblclick(function(){
        var id = $(this).val();

        for(start=id; start<=10; start++)
        {
            $('input[value="'+start+'"]').val('hello');
            //$('input[value="enter highlight"]')
        }
    });

Answer 3

这样的东西？

$(document).ready(function() {
  $("input").dblclick(function() {
    var index = $(this).closest('td').index() + 1;
    var rows = $(this).closest('tr').nextAll().addBack();
    rows.find('td:nth-child(' + index + ') input').val($(this).val());
  });
});

<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>

Answer 4

我不会在这里发布现成的代码，但是你可以给你的输入id如“box1”，“box2”等。当你双击输入时，你可以得到它的id，得到索引它然后递增索引并通过“box”引用下一个输入，直到你找不到具有这样id的元素或达到一个特殊数字，如你的情况下为10。

一些伪代码：

var clickedBoxId = this.ID; // "this" should point to the box clicked
var index = clickedBoxId.Replace('box','');

for( int i = index; i <= 10; i++ )
{
    var anotherBox = document.getElementById('box' + i);
    if( anotherBox !== 'undefined' )
    {
        anotherBox.value = this.value
    }
}

请注意，我不经常使用javascript，因此代码应该被理解为伪代码，并且只是在复制粘贴它时不起作用。

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

4 个答案: