JSFiddle - React, Tailwind, and code Playground

HTML

<p>To select a table, double click on it or press its <em>Select</em> button.</p>
<div>
    <table class="data">
        <tr>
            <th>Table</th><td>#1</td><td><img src="/img/logo.png"></td>
        </tr>
    </table>
    <input type="button" class="select" value="Select">
</div>
<div>
    <table class="data">
        <tr>
            <th>Table</th><td>#2</td><td><img src="/img/logo.png"></td>
        </tr>
    </table>
    <input type="button" class="select" value="Select">
</div>

CSS

div{
    margin: 1em;
}
table{
    border-collapse: collapse;
}
th, td{
    border: 1px solid gray;
    padding: 2em;
    background-color: #AEAEAE;
}

JavaScript

jQuery(function($){
	$("body").on("dblclick", "table.data", function(){
		selectTable($(this));
		return false;
	});
	$("body").on("click", ".select", function(){
        selectTable($(this).siblings("table.data:first"));
		return false;
	});
    $(document).on("click", noTableSelected);
});

function selectTable($table){
    $table.find("img").hide();
    selectNode($table[0]);
}
function noTableSelected(){
    $("table.data img").show();
}


/*
 * Ugly function, please forgive
 */
function selectNode(nodo){ // v2009-07-22
	// Creamos un rango
	try{ // FF
		var rango = document.createRange();
	}catch(e){
		try{ // IE
			var rango = document.body.createTextRange();
		}catch(e){
			return;
		}
	}

	// Asignamos texto al rango
	try{ // FF
		rango.selectNode(nodo);
	}catch(e){
		try{ // IE
			rango.moveToElementText(nodo);
		}catch(e){
			return;
		}
	}

	// Seleccionamos el rango
	try{ // FF
		var seleccion = window.getSelection();
		seleccion.removeAllRanges(); // Eliminar selección actual
		seleccion.addRange(rango);
	}catch(e){
		try{ // IE
			rango.select();
		}catch(e){
			return;
		}
	}
}