malike naemi Ответов: 1

Привет как я могу нажать на ячейку таблицы и изменить ее цвет в приведенном ниже коде

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Create a table</title> 
<style type="text/css"> 
div {
background: red;  
margin: 5px;    
}

table {
 border: 2px solid black;   
}

td {
    padding: 10px;
 border: 1px solid lightgrey; 
}


</style> 
 
</head>

<body > 
<input type="text" id="tb1" value="2">
<input type="text" id="tb2" value="4">
<form> 
<input type="button" onclick="createTable()" value="Create the table"> 
</form>
</body>
</html>

<script>
function createTable() {
    var a, b, tableElem, rowElem, colElem;

    a = document.getElementById('tb1').value;
    b = document.getElementById('tb2').value;

    if (a == "" || b == "") {
        alert("Please enter some numeric value");
    } else {
        tableElem = document.createElement('table');

        for (var i = 0; i < a; i++) {
            rowElem = document.createElement('tr');

            for (var j = 0; j < b; j++) {
                colElem = document.createElement('td');
                //colElem.appendChild(document.createTextNode(j + 1));
                rowElem.appendChild(colElem);
            }

            tableElem.appendChild(rowElem);
        }

        document.body.appendChild(tableElem);

    }
}





</script>


Что я уже пробовал:

я не знаю, как я могу сделать это с одной ячейкой, потому что она находится в dom, а не в html

1 Ответов

Рейтинг:
1

DerekT-P

как насчет чего-то вроде (после добавления таблицы в тело документа): 

$('td').click(function() {$(this).addClass('highlighted');});
Это вызовет какой-нибудь TD элемент для изменения цвета при нажатии; если вы хотите ограничить его только добавленной таблицей, то добавьте уникальный элемент. ID атрибут к TABLE элемент и обратитесь к нему в селекторе:
$('#addedTable td')....
(Это требует, чтобы вы включили хотя бы базовую версию JQuery на свою страницу). Вам также нужно будет добавить класс .highlighted с любым визуальным стилем, который вы хотите для своих выделенных ячеек.C