HTML行を選択して選択したデータを取得

Question

私はHTML行をクリックしてすべての要素を取得しようとしていますが、私はそれを理解できません。以下はHTML Land Javaスクリプトコードです。

<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> 

そして、私のjavascriptのコード

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

Answer 1

あなたは、選択した行のすべてのtdを選択し、各tdのinnerHTMLプロパティを取得することができます。

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>

Answer 2

あなたは純粋CSSと同じことを行うことができます。以下は

は、私はあなたがjQueryのを使用している場合、あなたはこのような何かを試すことができ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>

Answer 3

ためhoverクラスを使用している例です。さらに、javascriptの行の色を変更する代わりにcssを使用することもできます。

場合

$('#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>

Answer 4

あなたはクリックで現在の 'TR' や、行要素のデータを読みたい場合は、あなたが純粋なJavaScriptを使用して、これを試すことができます。

<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/