使用Javascript读取所有td值

Question

I am trying to get all td and compare each td value to a string . but my code only reads the first td of each tr .

Here is my HTML :

<table border="2px" id="tab">
<tr>
<td>color</td>
<td> a </td>
<td> font</td>
<td>123</td>
</tr>

<tr>
<td>font</td>
<td> color </td>

</tr>

<tr>
<td>a</td>
<td> color</td>
<td> font</td>

</tr>

<tr>
<td>font</td>

</tr>

</table>

My js code:

var t=["color","font","a"];

function color()
{
    var colr=0;
    var tab=[];
    var table = document.getElementById("tab");
    var len=table.rows.length;

for (var i = 0; i< len; i++) 
{

                        for (var j=0; j<table.rows[i].cells.length; j++)

                             {

                                 tab[j]= table.rows[i].cells[j].innerHTML;

                                // alert(tab[j]);
                                if(tab[j]== t[0])
                                 { colr++;}
                             }
  } 

alert(colr);
  }

What am I missing?

Answer 1

The spacing in the <td> is messing with the comparisons. As your code lies, you're comparing " color" to "color" and that's returning false, thus seeing as you're only getting that colr index going up to 1.

You'll need to strip out the spaces in order to compare properly, example JSFiddle here: https://jsfiddle.net/76q3aro3/