Member 13296172 Ответов: 2

Динамическая функция onclick кнопки не работает ?

я создаю таблицу динамически с помощью java script.когда я ввожу значение и нажимаю кнопку Копировать, он динамически генерирует таблицы. затем я пытаюсь вставить значения в textbox1 и получить значение в txtbox2, нажав кнопку get. но функция get button onclick не работает ?

ниже приведен мой код.

Что я уже пробовал:

<pre><!DOCTYPE html>
<html>
<head>
       <title></title>
    <style>
.mytable {
border:1px solid #000000;
border-collapse:collapse;
width:100%;
height:99px;
}
.mytable td{

border:1px solid #000000;
height:50px;
}
</style>

<script type="text/javascript">
    var s = 1;
    function Createtbl() {
        var count = document.getElementById("txtbox").value;
        var table = document.createElement('table');
        table.className = "mytable";
        for (var i = 1; i <= count; i++) {
            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.setAttribute('colSpan', '5');
            var text1 = document.createTextNode('Header');
            td1.appendChild(text1);
            tr.appendChild(td1);
            table.appendChild(tr);

            var tr1 = document.createElement('tr');
            var td11 = document.createElement('td');
            var td22 = document.createElement('td');
            td22.setAttribute('colSpan', '3');
            var td33 = document.createElement('td');
            var text11 = document.createTextNode('Name');
            var text22 = document.createTextNode('Age');
            var text33 = document.createTextNode('Sex');
            td11.appendChild(text11);
            td22.appendChild(text22);
            td33.appendChild(text33);
            tr1.appendChild(td11);
            tr1.appendChild(td22);
            tr1.appendChild(td33);
            table.appendChild(tr1);

            var tr2 = document.createElement('tr');
            var td111 = document.createElement('td');
            td111.setAttribute('rowSpan', '3');
            var td222 = document.createElement('td');
            var td333 = document.createElement('td');
            var td444 = document.createElement('td');
            var td555 = document.createElement('td');
            td555.setAttribute('rowSpan', '3');





            var text111 = document.createElement("input");
            text111.id = "txtbox1" + s;
            text111.className = "tbox1";
            var text222 = document.createTextNode('');
            var text333 = document.createTextNode('');
            var text444 = document.createTextNode('');
            var text555 = document.createTextNode('');

            td111.appendChild(text111);
            td222.appendChild(text222);
            td333.appendChild(text333);
            td444.appendChild(text444);
            td555.appendChild(text555);
            tr2.appendChild(td111);
            tr2.appendChild(td222);
            tr2.appendChild(td333);
            tr2.appendChild(td444);
            tr2.appendChild(td555);
            table.appendChild(tr2);



            var tr3 = document.createElement('tr');
            var td1111 = document.createElement('td');
            var td2222 = document.createElement('td');
            var td3333 = document.createElement('td');
            var text1111 = document.createTextNode('');
            var text2222 = document.createTextNode('');
            var text3333 = document.createTextNode('');
            td1111.appendChild(text1111);
            td2222.appendChild(text2222);
            td3333.appendChild(text3333);
            tr3.appendChild(td1111);
            tr3.appendChild(td2222);
            tr3.appendChild(td3333);
            table.appendChild(tr3);



            var tr4 = document.createElement('tr');
            var td115 = document.createElement('td');
            var td225 = document.createElement('td');
            var td335 = document.createElement('td');
            var text115 = document.createTextNode('');
            var text225 = document.createTextNode('');
            var text335 = document.createTextNode('');
            td115.appendChild(text115);
            td225.appendChild(text225);
            td335.appendChild(text335);
            tr4.appendChild(td115);
            tr4.appendChild(td225);
            tr4.appendChild(td335);
            table.appendChild(tr4);



            var tr5 = document.createElement('tr');
            var td116 = document.createElement('td');
            var td226 = document.createElement('td');
            td226.setAttribute('colSpan', '4');
            var text116 = document.createTextNode('');
            var text226 = document.createTextNode('');
            td116.appendChild(text116);
            td226.appendChild(text226);
            tr5.appendChild(td116);
            tr5.appendChild(td226);
            table.appendChild(tr5);

            var tr6 = document.createElement('tr');
            var td117 = document.createElement('td');
            td117.setAttribute('colSpan', '5');
            var text117 = document.createTextNode('Footer');
            td117.appendChild(text117);
            tr6.appendChild(td117);
            table.appendChild(tr6);


            var tr7 = document.createElement('tr');
            var td118 = document.createElement('td');
            td118.setAttribute('colSpan', '5');
            var span = document.createElement('span');
            span.innerHTML = '<button id="btn" onclick="getdata()">GET</button>';

           
            //var text118 = document.createElement("button");
            //text118.id="btn";
            //text118.innerHTML = "Get Data";

            //btn.onclick =getdata;


            td118.appendChild(span);
            tr7.appendChild(td118);
            table.appendChild(tr7);


            var tr8 = document.createElement('tr');
            var td119 = document.createElement('td');
            td119.setAttribute('colSpan', '5');
            var text119 = document.createElement("input");
            text119.id = "txtbox2" + s;
            text119.className = "tbox2";
            td119.appendChild(text119);
            tr8.appendChild(td119);
            table.appendChild(tr8);
            s++;

        }
        document.body.appendChild(table);
    }
Createtbl();

    //document.getElementById("btn").addEventListener("click", getdata);
    function getdata() {
        for (j = 1; j <= count; j++) {
            var c = document.getElementById("txtbox1" + s).innerHtml;
            document.getElementById("txtbox2" + s).innerHtml = c.innerHtml;
        }
    };
</script>
</head>
<body>
<div>

 <input id="txtbox" type="text"/>
 <input id="Button1" type="button" value="COPY"  onclick="Createtbl()"/>

</div>

</form>
</body>
</html>

2 Ответов

Рейтинг:
4

Andy Lanng

Удалите строку, в которой вызывается функция (кстати: найдите функцию самостоятельного вызова)

добавьте эту строку вверху:

document.addEventListener('DOMContentLoaded', Createtbl, false);


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

Member 13296172

можете ли вы предоставить мне решение ?

Andy Lanng

А? Я только что это сделал

Member 13296172

но значение не попадает в текстовое поле 2

Andy Lanng

ай - я вижу. ОК - следующее решение

Member 13296172

я новичок, так что, пожалуйста, помогите с этим.

Andy Lanng

Без проблем. Я опубликовал второе решение.

Вам следует заглянуть в jQuery. Это делает такие вещи, как динамические формы (и манипуляции с документами в целом) намного проще, и в настоящее время для этого существует больше помощи

Dnyati

Я создаю динамическую таблицу, в которой у меня есть 3 столбца. Первые столбцы имеют название кампании, 2-й и 3-й столбцы-это статус той кампании, которая является кнопкой изображения. Что я ожидаю, когда нажимаю кнопку статуса, она должна возвращать соответствующее название кампании. Ниже приведен мой код. Ничего не происходит, когда я нажимаю на кнопку состояния.

было бы здорово, если бы вы могли предоставить решение.

https://jsfiddle.net/Dnyati/qepuvbjx/3/

Andy Lanng

Пожалуйста, публикуйте новые вопросы как вопрос. Мы ограничены в том, какие взаимодействия мы можем предоставить в ответных сообщениях

Рейтинг:
14

Andy Lanng

Когда документ записывается, он изменяет то, что называется DOM (Document Object Model). Если вы добавляете что-то в документ с помощью javascript, то части DOM не обновляются. Одна вещь, которая этого не делает, - это ссылки на документы / сценарии. Что касается документа, то пункт: '<button id="btn" onclick="getdata()">GET</button>' это просто элемент без javascript.

Вы можете создать свои собственные ссылки на javascript, добавив событие в javascript:


document.getElementById("btn").addEventListener("click", function(e) {
	getdata()
});

Member 13296172

я ДНТ знаю, куда это положить. не могли бы вы дать мне полное решение? так что это будет полезно.

Andy Lanng

обратите внимание на эту строку в вашем коде:
span.innerHTML = '<button id="btn" onclick="getdata()">GET</button>';
измените его на
span.innerHTML = '<button id="btn">GET</button>';
добавьте фрагмент кода ниже

Member 13296172

вот JS скрипка для моего кода https://jsfiddle.net/x4j6s99d/

Andy Lanng

Что ж, я все устроил, как мог.: https://jsfiddle.net/x4j6s99d/6/
В конце концов, вы пытаетесь получить доступ к innerHtml текстового поля? Нет никакого внутреннего html

Member 13296172

пожалуйста, предоставьте мне soln

Member 13296172

спасибо, братан, за помощь !!