javascript - 选择HTML行并获取所选数据

我试图单击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>

最佳答案

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