Выбор n-го тега <tr> через JavaScript; Разрешение и запрет редактирования таблицы через JavaScript

@Armelior · Регистрация: 01.11.2015

Студворк — интернет-сервис помощи студентам

Уважаемые форумчане, я пока еще новичок в JavaScript и хотел попросить у вас помощи.

Никак не могу разобраться: я хочу создать динамически новую строку моей таблицы и сделать так, чтобы класс и события onmouseover и onmouseup задавались в новосозданном теге <tr> для ее подстветки, в случае наведения курсора. Как можно выбрать этот n-ный тег для использования innerHTML?

Как можно считать значения тегов input необходимых выделенных ячеек, чтобы их просуммировать и вывести через alert?

Каким способом можно разрешить и, соответственно, запретить редактирование таблицы через radiobuttons?

HTML и JavaScript коды прилагаю.

Подскажите, как это можно сделать?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
 
<html>
<head>
           <title> Make an order </title>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script type="text/javascript" src="scripts.js"></script>
</head>
 
<body>
    <h3>List</h3>
        <input type="radio" value="Editable" name="edit" id="enable" /> Editable <br>
        <input type="radio" value="Non-editable" name="edit" id="disable" checked /> Non-editable <br>
        <table id="tbl" width="350px" border="1">
            <caption>List of Goods</caption>
            <th>Check</th><th>Good</th><th>Cost</th><th>Country</th>
            <tr onMouseOver="highlight(this)" onMouseOut="normal(this)">
                <td><input type="checkbox" name="chk"/></td>
                <td><input type="text" name="txt" value="Sneakers"/></td>
                <td><input type="number" name="cost" value="2600"/></td> 
                <td>
                    <select name="country">
                        <option value="in">India</option>
                        <option value="de">Germany</option>
                        <option value="fr">France</option>
                        <option value="us">United States</option>
                        <option value="ch">Switzerland</option>
                    </select>
                </td>
            </tr>
            <tr onMouseOver="highlight(this)" onMouseOut="normal(this)">
                <td><input type="checkbox" name="chk"/></td>
                <td><input type="text" name="txt" value="pans"/></td>
                <td><input type="number" name="cost" value="1500"/></td> 
                <td>
                    <select name="country">
                        <option value="in">India</option>
                        <option value="de">Germany</option>
                        <option value="fr">France</option>
                        <option value="us">United States</option>
                        <option value="ch">Switzerland</option>
                    </select>
                </td>
            </tr>
        </table>
        <br><br><br>
                <input type="button" value="Add Row" onclick="addRow('tbl')" />
        <input type="button" value="Delete Row" onclick="deleteRow('tbl')" />
        <input type="button" value="Cost" />
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
disable = new Boolean();
 
function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
 
    var colCount = table.rows[1].cells.length;
 
    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        switch(newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "number":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
}
 
function deleteRow(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
 
        for(var i=1; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount = 1) {
                    alert("You cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
            
        }
    }catch(e) {
        alert(e);
    }
}
 
function highlight(a) {
    if (disable == false) a.className = 'highlight';
}
 
function normal(a) {
    a.className = 'normal';
}

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .