Wählen Sie Html Zeile und erhalten Sie ausgewählte Daten

Ich versuche, auf eine Zeile html klicken und alle Elemente, aber ich kann es nicht herausfinden, unten sind meine HTML Land Java Script Codes, Hilfe!Wählen Sie Html Zeile und erhalten Sie ausgewählte Daten

<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0"> 
    <tr id="1"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();"> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
    <tr id="2"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();"> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
    </tr> 
    <tr id="3"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();"> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
    </tr> 
</table>

Und mein Javascript-Codes

<script type="text/javascript"> 
    function ChangeColor(tableRow, highLight) { 
     if (highLight) { 
     tableRow.style.backgroundColor = '#dcfac9'; 
     } else { 
     tableRow.style.backgroundColor = 'white'; 
     } 
    } 
</script>

Quelle

2017-02-21 Rookie

möchten Sie tr Element auf klicken? – Nitesh

Sie haben nicht die Funktion readvalues in Javascript und welches Element möchten Sie besonders? für diese Zeile oder alle Elemente? – Ankit

@Nitesh Ja, das ist, was ich tun wollte, aber es ist jetzt gelöst – Rookie

Sie können alle td von ausgewählten Zeile auswählen und die innerHTML- jedes td bekommen.

function ChangeColor(tableRow, highLight) 
 
{ 
 
if (highLight) 
 
{ 
 
    tableRow.style.backgroundColor = '#dcfac9'; 
 

 

 
} 
 
else 
 
{ 
 
    tableRow.style.backgroundColor = 'white'; 
 
} 
 
} 
 
function readvalues(tableRow){ 
 
var columns=tableRow.querySelectorAll("td"); 
 
for(var i=0;i<columns.length;i++) 
 
console.log('Column '+i+': '+columns[i].innerHTML); 
 
}

<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0"> 
 
<tr id="1"onmouseover="ChangeColor(this, true);" 
 
      onmouseout="ChangeColor(this, false);" 
 
      onclick="readvalues(this);"> 
 
<td>1</td> 
 
<td>2</td> 
 
<td>3</td> 
 
</tr> 
 
<tr id="2"onmouseover="ChangeColor(this, true);" 
 
      onmouseout="ChangeColor(this, false);" 
 
      onclick="readvalues(this);"> 
 
<td>4</td> 
 
<td>5</td> 
 
<td>6</td> 
 
</tr> 
 
<tr id="3"onmouseover="ChangeColor(this, true);" 
 
      onmouseout="ChangeColor(this, false);" 
 
      onclick="readvalues(this);"> 
 
<td>7</td> 
 
<td>8</td> 
 
<td>9</td> 
 
</tr> 
 
</table>

Quelle

2017-02-21 07:42:28

Vielen Dank Es funktioniert und Entschuldigung für die späte Antwort – Rookie

Gut zu hören.Kann akzeptieren Sie, wie es andere auch –

Sie können mit reinem CSS das gleiche tun.

Unten ist ein Beispiel, wo ich hover Klasse für true

tr{ 
 
    background: grey; 
 
} 
 
tr:hover{ 
 
    background: white; 
 
} 
 
.hover:hover{ 
 
    background:#dcfac9; 
 
}

<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0"> 
 
<tr id="1" class="hover" 
 
      onclick="readvalues();"> 
 
<td>1</td> 
 
<td>2</td> 
 
<td>3</td> 
 
</tr> 
 
<tr id="2" 
 
      onclick="readvalues();"> 
 
<td>4</td> 
 
<td>5</td> 
 
<td>6</td> 
 
</tr> 
 
<tr id="3" class="hover" 
 
      onclick="readvalues();"> 
 
<td>7</td> 
 
<td>8</td> 
 
<td>9</td> 
 
</tr> 
 
</table>

Quelle

2017-02-21 07:45:06 aje

benutzt haben Wenn Sie jQuery verwenden, können Sie so etwas wie dies versuchen. Mehr noch, Sie können CSS verwenden, anstatt die Zeilenfarbe in Javascript zu ändern.

$('#example tr').click(function() { 
 
    var values = $(this).find('td').map(function() { 
 
     return $(this).text(); 
 
    }).get(); 
 
    
 
    console.log(values); 
 
});

table tr:hover { 
 
    background-color: #dcfac9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="example" width="100%" border="1" cellpadding="0" cellspacing="0"> 
 
<tr id="1"> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
</tr> 
 
    
 
<tr id="2"> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
</tr> 
 
<tr id="3"> 
 
    <td>7</td> 
 
    <td>8</td> 
 
    <td>9</td> 
 
</tr> 
 
</table>

Quelle

2017-02-21 07:46:09

Vielen Dank Es funktioniert und Entschuldigung für die späte Antwort – Rookie

Im Fall, wenn Sie die aktuellen 'tr' oder Zeilenelementdaten auf Klick lesen möchten, können Sie diese mit reinen Javascript versuchen:

<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0"> 
<tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
</tr> 
<tr> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
</tr> 
<tr> 
    <td>7</td> 
    <td>8</td> 
    <td>9</td> 
</tr> 
</table> 


<script language="javascript"> 
function readValues(evt){ 
    var elem = evt.target.parentElement; 
    console.log(elem); //elem contains current tr element's data 
} 

var elem = document.querySelectorAll("#example tr"); 

for(var i=0;i<elem.length;i++){ 
    bindMe(elem[i]); 
} 

function bindMe(elem){ 
    elem.addEventListener("click", function(evt){ 
    readValues(evt); 
    }); 
} 
</script>

jsfiddle: https://jsfiddle.net/rxvjmvzh/

Quelle

2017-02-21 07:54:16 Nitesh

Wählen Sie Html Zeile und erhalten Sie ausgewählte Daten

Antwort

Verwandte Themen