Добавление кнопки, которая открывает диалоговое окно

-2

Я хотел бы получить помощь, чтобы добавить кнопку, открывающую диалоговое окно. Наверное, это легко сделать, но пока не удалось реализовать его.Добавление кнопки, которая открывает диалоговое окно

У меня есть следующие функции: яваскрипт

function extract_results(jsonDataRaw){ 
    jsonResultSect = jsonDataRaw['result'] 
    retTable = "" 
    retText = "ret text <br/>" 
    for(key in jsonResultSect){ 
     myJ = jsonResultSect[key] 

     a = myJ['a'] 
     b = myJ['b'] 
     c = myJ['c'] 
     init = myJ['INIT1'] + myJ['INIT2'] 
     r = myJ['RUNNING'] 

     retTable += "<tr><td><td>" + key + "</td><td>" +a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + init + "</td><td>" + r + "</td></tr>" 

    } 
    return retTable 
}

Кроме того, у меня есть следующий вид:

 <div id="contactdiv"> 
       <form class="form" action="#" id="contact"> 
        <img src="images/button_cancel.png" class="img" id="cancel" /> 
        <h3>Contact Form</h3> 
        <hr/> 
        <br/> 
        <label>Name: <span>*</span> 
        </label> 
        <br/> 
        <input type="text" id="name" placeholder="Name" /> 
        <br/> 
        <br/> 
        <label>Email: <span>*</span> 
        </label> 
        <br/> 
        <input type="text" id="email" placeholder="Email" /> 
        <br/> 
        <br/> 
        <label>Contact No: <span>*</span> 
        </label> 
        <br/> 
        <input type="text" id="contactno" placeholder="10 digit Mobile no." /> 
        <br/> 
        <br/> 
        <label>Message:</label> 
        <br/> 
        <textarea id="message" placeholder="Message......."></textarea> 
        <br/> 
        <br/> 
        <input type="button" id="send" value="Send" /> 
        <input type="button" id="cancel" value="Cancel" /> 
        <br/> 
       </form> 
      </div>

I'v принял эту форму из следующего link.

Для каждой строки retTable я хочу добавить дополнительный столбец с помощью простой кнопки, которая отобразит диалоговое окно с вышеуказанной формой и отправьте key в качестве параметра.

К сожалению, мне не удалось совместить этот пример с моим кодом. Я смог создать простое всплывающее окно, которое включает форму, но я просто хочу диалоговое окно и отправлю key в качестве параметра.

источник

2015-12-25 Omri

запятой не может быть необязательным в некоторых случаях в JavaScript (пока не «использовать строгий» используется), но они не должны быть, включают их, чтобы сохранить ваш код чистый и структурированный и избежать непредвиденного поведения ... – Icepickle

Мое предлагаемое решение отображает div-called popup, которое вы, конечно, можете использовать в качестве диалога. Кнопка добавлена в новый столбец для каждой строки вашего объекта данных. При нажатии на кнопку отображается всплывающее окно, проходящее в ключевом индексе. Надеюсь, этого достаточно, чтобы вы пошли. Мой пример просто передает ключ, как вы просили, но, возможно, вам нужно вместо этого значение. Во всяком случае, надеюсь, что это поможет.

<head> 
 
    <style> 
 
    popup { 
 
     background-color: #eee; 
 
     display: none; 
 
     width: 300px; 
 
     height: 400px; 
 
     margin: 0 auto; 
 
     border-style: solid; 
 
     border-width: 2px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body onload="start()"> 
 
    <div> 
 
    <table id='table'> 
 

 
    </table> 
 
    </div> 
 
    <popup id='popup'> 
 
    <div id="contactdiv"> 
 
     <form class="form" action="#" id="contact"> 
 
     <img src="images/button_cancel.png" class="img" id="cancel" /> 
 
     <h3>Contact Form</h3> 
 
     <h3 id='the-key'>Key: </h3> 
 
     <hr/> 
 
     <br/> 
 
     <label>Name: <span>*</span> 
 
     </label> 
 
     <br/> 
 
     <input type="text" id="name" placeholder="Name" /> 
 
     <br/> 
 
     <br/> 
 
     <label>Email: <span>*</span> 
 
     </label> 
 
     <br/> 
 
     <input type="text" id="email" placeholder="Email" /> 
 
     <br/> 
 
     <br/> 
 
     <label>Contact No: <span>*</span> 
 
     </label> 
 
     <br/> 
 
     <input type="text" id="contactno" placeholder="10 digit Mobile no." /> 
 
     <br/> 
 
     <br/> 
 
     <label>Message:</label> 
 
     <br/> 
 
     <textarea id="message" placeholder="Message......."></textarea> 
 
     <br/> 
 
     <br/> 
 
     <input type="button" id="send" value="Send" /> 
 
     <input type="button" id="cancel" value="Cancel" /> 
 
     <br/> 
 
     </form> 
 
    </div> 
 
    </popup> 
 
</body> 
 

 
<script> 
 
    function start() { 
 
    var data = { 
 
     'result': [{ 
 
     'a': 'a', 
 
     'b': 'b', 
 
     'c': 'c', 
 
     'INIT1': 3, 
 
     'INIT2': 5, 
 
     'RUNNING': 'YES' 
 
     }, { 
 
     'a': 'a', 
 
     'b': 'b', 
 
     'c': 'c', 
 
     'INIT1': 3, 
 
     'INIT2': 5, 
 
     'RUNNING': 'NO' 
 
     }] 
 
    }; 
 
    extract_results(data); 
 
    } 
 

 
    function extract_results(jsonDataRaw) { 
 
    var jsonResultSect = jsonDataRaw['result']; 
 
    var retTable = ""; 
 
    var retText = "ret text <br/>"; 
 
    for (key in jsonResultSect) { 
 
     var myJ = jsonResultSect[key] 
 

 
     var a = myJ['a'] 
 
     var b = myJ['b'] 
 
     var c = myJ['c'] 
 
     var init = myJ['INIT1'] + myJ['INIT2'] 
 
     var r = myJ['RUNNING'] 
 

 
     table.innerHTML += "<tr><td><td>" + key + "</td><td>" + a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + init + "</td><td>" + r + "</td><td><button onclick='openDialogue(" + key + ")'>Show Key</button></td></tr>" 
 

 
    } 
 
    return retTable 
 
    } 
 

 
    function openDialogue(key) { 
 
    document.getElementById('popup').style.display = 'block'; 
 
    document.getElementById('the-key').innerHTML = 'Key: ' + key; 
 
    } 
 
</script>

источник

2015-12-26 00:44:30

Добавление кнопки, которая открывает диалоговое окно

ответ

Смежные вопросы