Событие Onclick удаляет прошлые поля ввода в таблице - PullRequest
Новая
       1

Событие Onclick удаляет прошлые поля ввода в таблице

0 голосов
/ 27 марта 2020

Вот мой HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <script src="scripts/randomletter.js"></script>
    <h2>NomiCoseCittàAnimali</h2>
</head>

<body>
    <div>Clicca qui sotto per generare una lettera casuale</div>
    <div><button onclick="ranlet()">?</button></div>
    <div>
        <table id="gametable">
            <tr>
                <th>Nomi</th>
                <th>Cose</th>
                <th>Città</th>
                <th>Animali</th>
                <th>Punteggio</th>
            </tr>
        </table>
    </div>
    <div><button onclick="gentable()">Click here to generate a new row</button></div>
</body>


</html>

А вот мой JS

function ranlet() {
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var x = Math.ceil((Math.random() * 1000) % 25)

    alert ("La lettera trovata è " +characters[x]);
}

function gentable() {
    document.getElementById('gametable').innerHTML +=
    "<tr>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"range\" min=0 max=4 step=0.5></td>"+
    "</tr>";
}

Нажмите здесь, чтобы сгенерировать новую строку добавляет внутреннюю таблицу HTML с новым рядом с новыми элементами. Это происходит каждый раз, когда я нажимаю на него, проблема в том, что каждый раз, когда я нажимаю на него, удаляются прецедентные поля ввода, он создает правильно новые строки, но полностью удаляет любое сохраненное значение.

Есть ли способ при выполнении gentable () сохранить значения из полей ввода прецедентов, не удаляя их?

Ответы [ 2 ]

0 голосов
/ 27 марта 2020

Когда вы используете код document.getElementById('gametable').innerHTML, он вызывает синтаксический анализ и перестраивание содержимого элемента DOM, что приводит к потере ввода. Вместо этого вы должны использовать insertAdjacentHTML.

Описания из MDN:

innerHTML

Установка значения inner HTML удаляет всех потомков элемента и заменяет их узлами, построенными путем анализа HTML, заданного в строке htmlString.

insertAdjacentHTML

Метод insertAdjacent HTML () интерфейса Element анализирует указанный текст как HTML или XML и вставляет результирующие узлы в дерево DOM в указанной позиции. Он не обрабатывает элемент, на котором он используется, и, следовательно, не разрушает существующие элементы внутри этого элемента. 

function ranlet() {
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var x = Math.ceil((Math.random() * 1000) % 25)

    alert ("La lettera trovata è " +characters[x]);
}

function gentable() {
    document.getElementById('gametable').insertAdjacentHTML('beforeend',( 
    "<tr>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"range\" min=0 max=4 step=0.5></td>"+
    "</tr>"                                         
                                                           ));
}
<body>
    <div>Clicca qui sotto per generare una lettera casuale</div>
    <div><button onclick="ranlet()">?</button></div>
    <div>
        <table id="gametable">
            <tr>
                <th>Nomi</th>
                <th>Cose</th>
                <th>Città</th>
                <th>Animali</th>
                <th>Punteggio</th>
            </tr>
        </table>
    </div>
    <div><button onclick="gentable()">Click here to generate a new row</button></div>
</body>
0 голосов
/ 27 марта 2020

Используя document.getElementById('gametable').innerHTML таким образом, вы сбрасываете html всей таблицы и создаете в процессе несколько тегов <tbody> (удаляя все, что было раньше), это не так.

Вам нужно добавлять новый элемент (строку) к таблице при каждом нажатии кнопки.

Кроме того, этот тип манипуляции с DOM будет намного проще при использовании чего-то вроде jQuery. 

function ranlet() {
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var x = Math.ceil((Math.random() * 1000) % 25)

    alert ("La lettera trovata è " +characters[x]);
    
}

function gentable() {
    document.getElementById('gametable').innerHTML +=
    "<tr>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"text\"></td>"+
    "<td><input type=\"range\" min=0 max=4 step=0.5></td>"+
    "</tr>";
}



function appendRow() {
    const newRow = document.createElement('tr')
    let td, input;
    
    for(let i=0; i<4; i++){
      td = document.createElement('td')
      input = document.createElement('input')
      input.setAttribute('type','text')
      td.appendChild(input)
      newRow.appendChild(td)
    }
    
    
    td = document.createElement('td')
    input = document.createElement('input')
    input.setAttribute('type','range')
    input.setAttribute('min',0)
    input.setAttribute('max',4)
    input.setAttribute('step',0.5)
    td.appendChild(input)
    newRow.appendChild(td)
    
    document.getElementById('gametable').appendChild(newRow);
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <script src="scripts/randomletter.js"></script>
    <h2>NomiCoseCittàAnimali</h2>
</head>

<body>
    <div>Clicca qui sotto per generare una lettera casuale</div>
    <div><button onclick="ranlet()">?</button></div>
    <div>
        <table id="gametable">
            <tr>
                <th>Nomi</th>
                <th>Cose</th>
                <th>Città</th>
                <th>Animali</th>
                <th>Punteggio</th>
            </tr>
        </table>
    </div>
    <div>
 
    <button onclick="appendRow()">Click here to generate a new row</button>
    </div>
</body>


</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...