Tengo una tabla HTML con una columna específica que quiero copiar al portapapeles presionando un botón. La columna contiene números de contenedor y le he dado una clase ".container"
Aquí está el código que tengo hasta ahora. HTML:
<button onclick="copyToClipboard('.container')">Copy container #s</button>JavaScript:
<script> function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } </script>Adaptado de esta pregunta, el único cambio que hice fue convertirlo en un selector de clase en lugar de un selector de ID para obtener un rango de tabla: haga clic en el botón Copiar al portapapeles usando jQuery
Cuando hago clic en el botón, copia el contenido de todas las celdas con la clase ".container". El desafío es que copia todo el contenido de la celda sin poner espacios en el medio. Idealmente, me gustaría poner una coma, un espacio entre líneas o algún otro tipo de separación entre los diferentes contenidos de las celdas.
He probado diferentes variaciones del código, así:
$("body"+", ").append($temp); $("body").append($temp+ ", "); $("body").append($temp).append(", ");Pero estos no funcionan. Tengo la sensación de que la razón por la que no funciona es que la variable $temp ya contiene la cadena concatenada de todos los contenidos de la celda, por lo que es demasiado tarde para dividir cadenas en este momento.
por lo tanto, creo que el cambio debe ocurrir en esta línea:
<button onclick="copyToClipboard('.container')">Copy container #s</button>Pero no estoy seguro de cómo modificarlo para que recorra cada celda y agregue una coma en el medio. Cualquier ayuda es apreciada
Para separar con , debe ejecutar un ciclo a través de los td s. Puede mapear todo el texto tds y unirlo con , .
$(element).find('td').map(function(){ return $(this).text(); }).get();Vea el fragmento a continuación:
function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); //Added below code; var cellValues = $(element).find('td').map(function(){ return $(this).text(); }).get(); var allCellValues = cellValues.join(','); //Added above code; $temp.val(allCellValues).select(); document.execCommand("copy"); $temp.remove(); console.log(allCellValues); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr class="container"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> </table> <button onclick="copyToClipboard('.container')">Copy container #s</button>Puedes probarlo aquí también.