JQuery - Как вызвать пользовательский выбор: текст в каждом элементе td внутри таблицы? - PullRequest
Новая
       10

JQuery - Как вызвать пользовательский выбор: текст в каждом элементе td внутри таблицы?

0 голосов
/ 18 марта 2019

Я хотел выделить весь текст внутри таблицы. Я поместил user-select:text в моем CSS и я могу вручную выделить текст внутри тд. 

td{
    user-select: text;
}

но как я могу автоматизировать выделение?

PS:

  • В каждой ячейке таблицы содержится только текст, нет изображений и т. Д.
  • Я хотел иметь возможность скопировать весь текст в таблице.

Ответы [ 2 ]

3 голосов
/ 18 марта 2019 

window.getSelection().selectAllChildren( document.getElementById('markME') );
<table id="markME">
<tbody>
  <tr>
    <td>1231</td>
    <td>1231</td>
    <td>1231</td>
    <td>1231</td>
    <td>1231</td>    
  </tr>
</tbody>
</table>

Справочник по выбору

1 голос
/ 19 марта 2019

Я хотел бы иметь возможность скопировать весь текст в таблице.

У меня есть, однако, что вы также хотите автоматизировать копирование в буфер обмена содержимого таблицы, если это возможно, вы можете сделать это с помощью следующего: 

$('#btn-copy').on('click', function(){
  
  //(1) - Get the html code of the table and insert into variable contentToCopy
  var contentToCopy = $('#your-table')[0].outerHTML;

//(2) - insert the html code into our hidden TextArea, notice I used html instead of val to preserve the html code
$('#hiddenTextarea').html(contentToCopy);

//(3) - by using select, we hightlight all the value inside our hidden TextArea
$('#hiddenTextarea').select();
  
  if(document.execCommand('copy')){ //finally copy the value of our hidden TextArea into clipboard by using function document.execCommand('copy')
	  alert('Copied! You may now paste it to excel, word, etc.');   		
	}
});
/*Optional, I just want to make content clear*/
table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid #DDD;
  padding: 5px;
}

/*We hide the Textarea by using absolute and position it to the left by negative 1000*/
#hiddenTextarea{
  position: absolute;
  left: -1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="your-table">
<tbody>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>    
  </tr>
</tbody>
</table>

<textarea id="hiddenTextarea"></textarea>

<br/>
<button id="btn-copy">Copy to Clipboard</button>
...