0

My previous question is here but it seems that using only window and document cannot get it done. What I want is that when the text from the first row is selected, the first input will be filled. Same for the second row.

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

https://jsfiddle.net/nrdq71pz/6/

<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>
</table>
Yang
  • 6,682
  • 20
  • 64
  • 96

2 Answers2

1

I'm having trouble figuring out what you are asking but does this get the job done? When you click "Test code 1" it will fill in the input value to "Hello".

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

I just noticed your comment on a post above. I think what I did was wrong so take a look at what I did here and tell me which one is closer to what you need. https://jsfiddle.net/nrdq71pz/9/

krizpers
  • 97
  • 10
  • Thanks. Not exactly. I want the input1 to get the highlighted text from row 1 only when part of "Test Code 1" is selected. For example, "Code 1" will fill in input1 with Code1. Same thing can be said for the second row. Is it more clear to you? – Yang Dec 13 '17 at 19:56
  • @Yang While I work on an update take a look at the second fiddle I added at the bottom. – krizpers Dec 13 '17 at 19:59
  • @Yang Do you want the whole string or just the highlighted text? – krizpers Dec 13 '17 at 20:08
  • Just the highlighted one. – Yang Dec 13 '17 at 20:14
  • @sinisake, I've been able to handle this for simple scenarios. But when it comes to each table cell, it fails. See https://jsfiddle.net/nrdq71pz/1/ – Yang Dec 13 '17 at 20:37
  • @krizpers. The if else statement does some of the tricks but it would fail when input1 has text. Besides, I'd like to generalize it to more than two rows. – Yang Dec 13 '17 at 20:38
  • @Yang sorry pal I got caught up in work. My day just started again but once I'm at lunch I'll take another look at this and see what I can do to help. – krizpers Dec 14 '17 at 15:32
1

This is jQuery solution. (Actually easier than i thought, i've thought that selection text inside elements can't be reached so easily, but...):

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

Demo:

$('td').on('mouseup',function() {
if (window.getSelection){ 
     s = window.getSelection().toString()
    }
$(this).next().find('input').val(s);
});
td {
  padding:10px;
}
<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>

So, point is to put event on cell, and then reach closest input (in your current hTML structure, this works, if you change something, you can modify it, easily, i guess)

sinisake
  • 11,240
  • 2
  • 19
  • 27
  • Do you have any idea why it doesn't work when I put the table into actual html page? https://jsfiddle.net/z9n264x5/1/ – Yang Dec 13 '17 at 22:04
  • 1
    @Yang, few problems... Bad selector (ui-widget is class), code is not wrapped in document ready....etc... https://jsfiddle.net/z9n264x5/2/ – sinisake Dec 13 '17 at 22:23