Question

我之前的问题在这里，但似乎只使用窗口和文档无法完成。我想要的是，当选择第一行的文本时，将填充第一个输入。第二行也是如此。

javascript - select text in table cell and autofill the input on the same row

ErrorController

Answer 1

我无法弄清楚你在问什么，但这可以完成工作吗？当您单击＆＃34;测试代码1＆＃34;它会将输入值填入＆＃34; Hello＆＃34;。

https://jsfiddle.net/nrdq71pz/8/

HTML：

<table>
  <tr>
    <td class="select">Test code 1</td>
    <td>
      <input type='text' id='input1' class="selection" />
    </td>
  </tr>
  <tr>
    <td>Test code 2</td>
    <td>
      <input type='text' id='input2' class="selection" />
    </td>
  </tr>
</table>

jQuery的：

$('.select').click(function(){
    $('#input1').val("hello")
})

我刚刚注意到您对上述帖子的评论。我觉得我所做的是错的，所以看看我在这里做了什么，并告诉我哪一个更接近你需要的东西。 https://jsfiddle.net/nrdq71pz/9/

Answer 2

这是jQuery解决方案。（实际上比我想象的要容易，我认为元素中的选择文本不能轻易达到，但是......）：

$('td').on('mouseup',function() {
if (window.getSelection){ 
     s = window.getSelection().toString()
    }
$(this).next().find('input').val(s);
});

演示：

＆＃13;

$('td').on('mouseup',function() {
if (window.getSelection){ 
     s = window.getSelection().toString()
    }
$(this).next().find('input').val(s);
});

＆＃13;

td {
  padding:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Test code 1</td>
<td>
  <input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
<tr>
<td>Test code 3</td>
<td>
<input type='text' id='input3' class="selection" />
</td>
</tr>
</table>

＆＃13;

所以，重点是将事件放在单元格上，然后达到最接近的输入（在你当前的hTML结构中，这是有效的，如果你改变一些东西，你可以轻松修改它，我猜）

JQuery自动填充表格行与相应的文本选择？

2 个答案: