Как получить элемент внутри ячейки таблицы?

Question

Число, которое вы указали внутри поля ввода , определяет ячейку в таблице. То, что я хочу, чтобы «достичь» в клеток DIV «ы первого диапазона в том же если заявление (которое определяет красный цвет для выбранной ячейки). Если это невозможно получить в существующем , если заявление, как еще я могу его получить? Пожалуйста, помогите.

Вот код: https://jsfiddle.net/th6vujjp/1/

или ниже:

var number = document.getElementById('number'); 
 

 
    number.onchange = function() { 
 
    
 
    var v = this.value; 
 
    
 
    var tdAttr = document.querySelector('td[data-cell|="'+v+'"]'); 
 
    
 
     
 
    
 
    if(tdAttr) { tdAttr.style.backgroundColor = 'red' 
 

 
    } 
 
    
 

 
}

td { 
 
    border: 1px solid blue; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
    
 
td[data-cell|=""] { 
 
    background-color: red; 
 
} 
 

 
    
 
input { 
 
    margin-bottom: 20px;

<form> 
 
    <input data-type="number" placeholder="Day" id="number" maxlength="2" > 
 
</form> 
 

 

 

 
<table> 
 

 
    <tr> 
 

 
     <td data-cell="1-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="2-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="3-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="4-01-15"></td> 
 

 
    </tr> 
 

 
     <tr> 
 

 
     <td data-cell="5-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="6-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="7-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="8-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
    </tr> 
 

 
     <tr> 
 

 
     <td data-cell="9-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="10-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="11-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="12-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
    </tr> 
 

 
     <tr> 
 

 
     <td data-cell="13-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="14-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="15-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
     <td data-cell="16-01-15"> 
 
      <div> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div> 
 
     </td> 
 

 
    </tr> 
 

 
</table>

Answer 1

var number = document.getElementById('number'); 

    number.onchange = function() { 

    var v = this.value; 

    var tdAttr = document.querySelector('td[data-cell|="'+v+'"]'); 
    if(tdAttr) { 
       tdAttr.style.backgroundColor = 'red'; 
       tdAttr.getElementsByTagName("span")[0].innerHTML ="Tamem"; 
    } 
}