选择Html行并获取选定的数据

我想单击一个html行并获取所有元素，但我无法弄清楚，下面是我的HTML土地java脚本代码，帮助！选择Html行并获取选定的数据

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

来源

2017-02-21 Rookie

你想点击tr元素？ – Nitesh

你没有在javascript中的readvalues函数，特别是你想要哪个元素？该行或所有元素？ – Ankit

@Nitesh是的，这就是我想要做的，但它现在解决了 – Rookie

您可以选择选择行的所有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>

来源

2017-02-21 07:42:28

非常感谢你这是工作和对很晚的答复遗憾 – Rookie

很高兴听到这个。你可以接受的答案，因为它会让别人也 –

你可以做同样的事情用纯CSS。

下面是一个例子，在那里我已经使用hover类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>

来源

2017-02-21 07:45:06 aje

如果您正在使用jQuery，你可以尝试这样的事情。更重要的是，您可以使用css而不是在javascript中更改行颜色。

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

来源

2017-02-21 07:46:09

非常感谢你它正在工作，对于迟到的回复感到抱歉 – Rookie

在情况下，如果你想阅读当前 '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/

来源

2017-02-21 07:54:16 Nitesh

选择Html行并获取选定的数据

回答

相关问题