Добавить / удалить строки таблицы с помощью JavaScript

Question

Добавить / удалить строки таблицы с помощью JavaScript

1

Привет, я стараюсь следовать этим строкам добавления/удаления таблицы динамически с помощью JavaScript

Моя цель - сканировать/вводить штрих-коды, которые будут составлять таблицу HTML. "Пользователь", "станция" будет переменной. "Контейнер" будет введен один раз и сохранен. Единственным изменяемым элементом будет сканирование, которое является новой строкой. Я получил его, чтобы добавить строку, но я не могу добавить переменные в соответствующие столбцы. Любые указания по этому поводу были бы замечательными!

Вот моя HTML ФОРМА

<form id="trackForm" 
    autocomplete='off'>
    <div class="row">
        <div class="col col-lg">
            <div id="s1group" class="input-group mb-2">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <b>CONTAINER: </b>
                    </div>
                </div>
                <input id="container" class="form-control" 
                    type="text" 
                    placeholder="Scan container." 
                    onpropertychange="checkScanInput();">
                </input>
                <div class="invalid-feedback">
                    This field cannot be empty!
                </div>
            </div>
            <div id="s2group" class="input-group">
                <div class="input-group-prepend">
                    <div id="s2label" class="input-group-text font-weight-bold">
                        SCAN: 
                    </div>
                </div>
                <input id="scan" class="form-control" 
                    type="text" 
                    placeholder="Scan entry or code." 
                    onpropertychange="checkScanInput();">
                </input>
                <div class="invalid-feedback">
                    This field cannot be empty!
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-2">
        <button id="trackSubmit" class="btn btn-dark font-weight-bold" 
            type="submit" 
            style="background-color: #005997; display:none;">
        </button>
    </div>
</form>

Это таблица:

<table id="resultTable" class="table display compact">
    <thead>
        <tr>
            <th>User</th>
            <th>Station</th>
            <th>Scan</th>
            <th>Container</th>
            <th>Date/Time</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Ниже приведен Javascript

var thisStation = stationList[ssv][1];
    var sessionUser = document.getElementById('userDisplay').textContent;


    var table = document.getElementById("resultTable");
    var rowCount = table.rows.length;
    var colCount = table.rows[0].cells.length;

    var row = table.insertRow(rowCount);
    for(var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }

    row = table.insertRow(table.rows.length);
    for(var i = 0; i < colCount; i++) {

        var newcell = row.insertCell(i);
        if(i == (colCount - 1)) {
            newcell.innerHTML = "<INPUT type=\"button\" value=\"Delete Row\" onclick=\"removeRow(this)\"/>";
        } else {
            newcell.innerHTML = table.rows[3].cells[i].innerHTML;
        }
    }

Yodavish 12 окт. 2018, в 23:23

Источник

Теги:

javascript

1 ответ

Ещё вопросы

Bigga_HD · Answer 1 · 2018-10-12T22-40-00.000Z

Проверьте фрагмент кода, запустите его и посмотрите, работает ли это для вас. Очевидно, вы можете/должны настроить его на свои (конкретные) потребности, но у вас есть таблица с возможностью добавлять строки, вводить данные, удалять правильные строки, как вам угодно, а также возможность "отправлять" ваши данные.

// ARRAY FOR HEADER.
    const arrHead = ['#', 'One', 'Two', 'Three'];
    // SIMPLY ADD OR REMOVE VALUES IN THE ARRAY FOR TABLE HEADERS.

    // FIRST CREATE A TABLE STRUCTURE BY ADDING A FEW HEADERS AND
    // ADD THE TABLE TO YOUR WEB PAGE.
    function createTable() {
        var empTable = document.createElement('table');
        empTable.setAttribute('id', 'empTable');            // SET THE TABLE ID.

        var tr = empTable.insertRow(-1);

        for (var h = 0; h < arrHead.length; h++) {
            var th = document.createElement('th');          // TABLE HEADER.
            th.innerHTML = arrHead[h];
            tr.appendChild(th);
        }

        var div = document.getElementById('cont');
        div.appendChild(empTable);    // ADD THE TABLE TO YOUR WEB PAGE.
    }

    // ADD A NEW ROW TO THE TABLE
    function addRow() {
        var empTab = document.getElementById('empTable');

        var rowCnt = empTab.rows.length;        // GET TABLE ROW COUNT.
        var tr = empTab.insertRow(rowCnt);      // TABLE ROW.
        tr = empTab.insertRow(rowCnt);

        for (var c = 0; c < arrHead.length; c++) {
            var td = document.createElement('td');          // TABLE DEFINITION.
            td = tr.insertCell(c);

            if (c == 0) {           // FIRST COLUMN.
                // ADD A BUTTON.
                var button = document.createElement('input');

                // SET INPUT ATTRIBUTE.
                button.setAttribute('type', 'button');
                button.setAttribute('value', 'Remove');
                button.setAttribute('id', 'rm');


                // ADD THE BUTTON 'onclick' EVENT.
                button.setAttribute('onclick', 'removeRow(this)');

                td.appendChild(button);
            }
            else {
                // CREATE AND ADD TEXTBOX IN EACH CELL.
                var ele = document.createElement('input');
                ele.setAttribute('type', 'text');
                ele.setAttribute('value', '');

                td.appendChild(ele);
            }
        }
    }

    // DELETE TABLE ROW.
    function removeRow(oButton) {
        var empTab = document.getElementById('empTable');
        empTab.deleteRow(oButton.parentNode.parentNode.rowIndex);       // BUTTON -> TD -> TR.
    }
    
    
    // EXTRACT AND SUBMIT TABLE DATA.
    function sumbit() {
        var myTab = document.getElementById('empTable');
        var values = new Array();
    
        // LOOP THROUGH EACH ROW OF THE TABLE.
        for (row = 1; row < myTab.rows.length - 1; row++) {
            for (c = 0; c < myTab.rows[row].cells.length; c++) {                  // EACH CELL IN A ROW.
                var element = myTab.rows.item(row).cells[c];
                if (element.childNodes[0].getAttribute('type') == 'text') {
                    values.push(element.childNodes[0].value);
                    
                }
            }
        }
        console.log('Data send:\n' + values);

    }

table {
            width: 70%;
            font: 17px Calibri;
       }

table, th, td 
       {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
            color: grey;
        }

#addRow {
  color: green;
  font-weight: bold;
}

#bt {
  color: blue;
  font-style: italic;
  font-weight: bold;
}

#rm {
  color: red;
  font-weight: bold;
}

<body onload="createTable()">
    
    <p>
      <input 
        type="button" 
        id="addRow" 
        value="Add New Row" 
        onclick="addRow()" />
    </p>

    <!--THE CONTAINER WHERE WE'll ADD THE DYNAMIC TABLE-->
    <div id="cont"></div>
    
      <p>
        <input 
          type="button" 
          id="bt" 
          value="Sumbit Data" 
          onclick="sumbit()" />
      </p>
</body>

Здравствуйте, Bigga_HD, спасибо за помощь, пока, я все еще новичок в Javascript, мой вопрос: если мы быстро сканируем значения (т.е. вводим для ввода в форму), как мы передаем их в эту построенную таблицу HTML? Например, у нас есть две сохраненные переменные сеанса userName и Station. UserName = "TestUser" переходит в столбец "One", а Station "Station1" в столбец 2. Затем фактическое введенное значение из введенной формы передается и входит в столбец 3?