Помогите с Динамической Таблицей JAVASCRIPT

118

26 июля 2021, 23:30

Я написала таблицу JS+HTML Но у меня возникла проблема с добавлением строки.Во время добавления строки дублируется значение первой строки.А мне нужно чтобы каждая строка начиналась пустой. Что нужно изменить или убрать в коде что бы значение не дублировалось?

И еще может кто-нибудь может подсказать как сделать чтобы таблица по дефолту была сортирована по дате в направлении от самой поздней к более ранней. Чтобы изменить направление сортировки и поле, пользователь должен кликнуть по заголовку колонки.

Заранее спасибо!

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
<div id="POItablediv"> 
    <table id="POITable" border="1"> 
        <tr> 
            <td>Start Date</td> 
            <td>Name</td> 
            <td>Spent time</td> 
            <td>Description</td> 
            <td></td> 
            <td></td> 
        </tr> 
        <tr> 
            <td><input size=25 type="text" id="latbox" /></td> 
            <td><input size=25 type="text" id="latbox" /></td> 
            <td><input size=25 type="text" id="latbox" /></td> 
            <td><input size=25 type="text" id="latbox" /></td> 
            <td><input type="button" id="delPOIbutton" value="-" onclick="deleteRow(this)" /></td> 
            <td><input type="button" id="addmorePOIbutton" value="+" onclick="insRow()" /></td> 
        </tr> 
    </table> 
<script type="text/javascript"> 
    function deleteRow(row) { 
        var i = row.parentNode.parentNode.rowIndex; 
        document.getElementById('POITable').deleteRow(i); 
    } 
 
    function insRow() { 
        var x = document.getElementById('POITable'); 
        var new_row = x.rows[1].cloneNode(true); 
        var len = x.rows.length; 
        x.appendChild(new_row); 
    } 
</script> 
</body> 
</html>

Answer 1

1. C помощью forEach()

<script type="text/javascript">
    function deleteRow(row) {
        var i = row.parentNode.parentNode.rowIndex;
        document.getElementById('POITable').deleteRow(i);
    }
    function insRow() {
        var x = document.getElementById('POITable');
        var new_row = x.rows[1].cloneNode(true);
        var len = x.rows.length;

        new_row.querySelectorAll('input[type=text]')
            .forEach(function (item) {
                item.value = "";
            });

        x.appendChild(new_row);
    }
</script>

https://ru.stackoverflow.com/a/563022/344278