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做同样的事情。

下面是一个示例，我使用了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>

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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/

选择Html行并获取所选数据

4 个答案: