javascript - 选择 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>