如何在表格单元格中获取元素？

Question

您在输入字段中放置的数字定义了表格中的单元格。 我想要的是＆＃34;达到＆＃34;在 if 语句（定义所选单元格的红色）中的单元格的第一个 span 。 如果无法在现有的 if 语句中找到它，我还能怎样获得它？ 请帮忙。

这里是代码： https://jsfiddle.net/th6vujjp/1/

或以下：

＆＃13;

＆＃13;

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'

    }
 

}

＆＃13;

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

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

 
input {
  margin-bottom: 20px;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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";
    }
}