Question

我一直在试图使用Javascript在表中添加和删除行的问题上停留。

我让添加部分工作了，删除了一些。如果您删除第一行或中间的行，则删除将失败（可以在实时here

中看到实时代码

我将其代码上传到PasteBin

null

我正在学习Java脚本，并且想要做的比通过添加新功能来做的更多。

Answer 1

此行抛出空值错误：

document.getElementById('whatToMark').value = "";

无论是在JS中还是在HTML中，您都没有将元素设置为whatToMark的ID。

Answer 2

您标记当前选定行的方法存在一些问题：

row.addEventListener('click', theIndex.bind(null, currentRow));

我建议不要使用全局变量，而建议使用行属性（或类）。因此，将该行更改为：

row.addEventListener('click', function(e) {
    document.querySelectorAll('tr[selected]').forEach(function(item) {
        item.removeAttr('selected');
    })
    row.setAttribute('selected', true);
});

添加为当前行选择的属性，并为其他行删除相同的属性。

通过这种方式，当您需要获取当前选中的行时，您可以简单地：

var rSelected = document.querySelector('tr[selected]');
var theRow = (rSelected == null) ? 0 : rSelected.rowIndex;

var itemNumber = 0
var currentRow = 0;
var selectedRow = 0;

function theIndex(theRow) {
    selectedRow = theRow;
}
document.getElementById("addItem").addEventListener("click", function () {
    if (document.getElementById('whatToDo').value != "") {
        currentRow++;
        var table = document.getElementById('myList');
        var row = table.insertRow(currentRow);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);

        itemNumber++;
        // alert(currentRow);
        // cell1.innerHTML = itemNumber;
        cell2.innerHTML = document.getElementById('whatToDo').value;
        cell3.innerHTML = document.getElementById('whenToDo').value;
        cell4.innerHTML = document.getElementById('whereToDo').value;
        //row.addEventListener('click', theIndex.bind(null, currentRow));
        row.addEventListener('click', function(e) {
            document.querySelectorAll('tr[selected]').forEach(function(item) {
                item.removeAttr('selected');
            })
            row.setAttribute('selected', true);
        });

        document.getElementById('whatToDo').value = "";
        document.getElementById('whenToDo').value = "";
        document.getElementById('whereToDo').value = "";
    }
});


document.getElementById("removeItem").addEventListener("click", function () {
    // var theRow = document.getElementById('whatToMark').value;
    var rSelected = document.querySelector('tr[selected]');
    var theRow = (rSelected == null) ? 0 : rSelected.rowIndex;
    if (theRow > 0) {
        document.getElementById("myList").deleteRow(theRow);
        //document.getElementById('whatToMark').value = "";
        currentRow--;
        itemNumber--;
    }
    selectedRow = 0;
});

document.getElementById("markAsDone").addEventListener("click", function () {
    // var theRow = document.getElementById('whatToMark').value;
    var theRow = selectedRow;
    alert("index: " + theRow + " elements: " + currentRow);
    var table = document.getElementById('myList');
    if (theRow != 0) {

        table.rows[theRow].style.setProperty("text-decoration", "line-through");
        document.getElementById('whatToMark').value = "";
    }
    selectedRow = 0;
});

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-sm-6">
            <table class="table table-hover">
                <tr>
                    <td colspan="3">
                        <h1>To Do List Example</h1>
                    </td>
                </tr>
                <tr>
                    <th><label>Item</label></th>
                    <th><label>Date</label></th>
                    <th><label>Location</label></th>
                </tr>
                <tr>
                    <td>
                        <input type="text" id="whatToDo" value="">
                    </td>
                    <td>
                        <input type="date" id="whenToDo" value="">
                    </td>
                    <td>
                        <input type="text" id="whereToDo" value="">
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="addItem" class="btn btn-default btn-primary active">
                            <i class="fas fa-plus"></i> Add This Item
                        </button>
                    </td>
                    <td>
                        <button id="markAsDone" class="btn btn-default ">
                            <i class="fas fa-check"></i> Mark As Done
                        </button>
                    </td>
                    <td>
                        <button id="removeItem" class="btn btn-default">
                            <i class="fas fa-trash-alt"></i> Remove Item
                        </button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-sm-6">
            <table class="table table-hover" id="myList">
                <tr>
                    <th><label></label></th>
                    <th><label>Event</label></th>
                    <th><label>Date</label></th>
                    <th><label>Location</label></th>
                </tr>
            </table>
        </div>
    </div>
</div>

需要帮助更新所选行的索引

2 个答案: