js動態新增input按鈕並給按鈕增加onclick的函式事件(帶引數)

阿新 • • 發佈：2019-01-06

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
        //onclick事件傳入value值和id
            function bt1(value, id) {
            //判斷點選的按鈕的id是否存在,不存在則建立,存在則alert
                if(!document.getElementById(id)) {
                //建立input元素 

                    var inp = document.createElement("input");
                    inp.type = "button";
                    //傳入點選按鈕的value值到新的按鈕
                    inp.value = value;
                    //傳入點選按鈕的id到新的按鈕(傳入是id+1防止重複)
                    inp.id = id;
                    //當方法有引數時，用onclick = 方法名(引數)時就有錯了，需要在方法名前面加function() 

                    inp.onclick = function() {
                        b1(id);
                    };
                    document.getElementById("div").appendChild(inp);
                } else {
                    alert("已存在")
                }
            }
            function b1(id) {
                var 
 flag = confirm("確認刪除?");
                if(flag) {
                    document.getElementById(id).remove();
                }
            }
        </script>
        <style type="text/css">
            #div {
                width: 600px;
                height: 450px;
                border: 1px solid black;
            }
            #div2 {
                width: 600px;
                height: 50px;
                border: 1px solid black;
            }
            input {
                margin-left: 21px;
                width: 90px;
                height: 45px;
            }
        </style>
    </head>
    <body>
        <div id="div"></div>

        <div id="div2">
            <input type="button" id="bt1" value="體育" onclick="bt1(this.value,this.id+1)" />
            <input type="button" id="bt2" value="語文" onclick="bt1(this.value,this.id+1)" />
            <input type="button" id="bt3" value="數學" onclick="bt1(this.value,this.id+1)" />
            <input type="button" id="bt4" value="英語" onclick="bt1(this.value,this.id+1)" />
            <input type="button" id="bt5" value="美術" onclick="bt1(this.value,this.id+1)" />
        </div>
    </body>
</html>

js動態新增input按鈕並給按鈕增加onclick的函式事件(帶引數)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l

jquery結合js實現動態新增內容，並給動態新增的內容新增事件

jquery結合js實現向後臺傳送請求，給頁面動態新增內容，並給動態新增的內容新增事件.html內容如下： <button class="btn btn-md customButton" id="add_red_envelope">新增紅包&

js動態建立li標籤並給li一個a標籤

對於前端的知識不是很熟練的運用,真的很傷,在這記下以防下次不記得 <ul id="myul"> </ul> js程式碼 -->可以使用append拼接字

分析js操作動態獲取屏高並觸發按鈕點擊事件回到頁面窗口的頂部

回到頂部 fixed pla bottom 拖動 position scrollto nload doc <!DOCTYPE html><html lang="en"><head> 　　<meta charset="UTF-8"&g

Js給表格每行動態新增input標籤

function InserTab() { var trLen = $("#tab1 tr").length; var rowT = "<tr><td><input type=text style='width:9

JS動態新增上傳檔案按鈕

如何實現將JS動態新增的TR中的值傳到後臺中並批量插入

在我的上一篇文章當中，已經在靜態頁面中實現了JS動態新增刪除TR。在實際工作中，更多的是需要將JS所新增的tr中的值儲存至資料庫中。下面我將介紹在SSH框架中如何實現這一功能需求。（以下均由我所做的實際專案給出功能程式碼）在JSP中，JS程式碼會稍有變化。 funct

Linux下用root許可權新增使用者，並給使用者或使用者組指定目錄的讀寫許可權(比如：tomcat檔案的讀寫許可權，可以用於新使用者部署專案)

目的：在linux環境中為了安全起見，不能讓所有專案都用root部署（防止root許可權過大，對重要檔案的誤操作），所以新加使用者或使用者組，對新使用者或使用者組授予部分檔案操作的許可權。 1.建立使用者newuser，並設定密碼（預設連帶建立newuser組） # useradd n

js動態新增表格和刪除表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script language="JavaS

動態新增文字框並獲取文字框的值

<html> <head> <meta charset="utf-8" /> <title></title> <scri

用js動態新增select標籤的option

js程式碼： var featureLayerURLTest=[["http://192.168.15.174:6080/arcgis/rest/services/Sample/GQYDGH/FeatureServer/0","線圖層1"]]; function createSelectOp

js動態新增table表的一行和刪除一行

vue動態新增資料，並實現點選刪除

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

利用js動態新增標籤，並且使用點選效果為其新增和移除class

js檔案 $(function () { $.ajax({ type: "post", url: purl+"/news/categorys", datatype: "json", succ

js----動態新增元素 && jQuery----動態新增元素

1.js ocument.getElementById('id').innerHTML=innerHtml; var creatLi = function(data){ var innerHtml = ""; for(var i

用python給pdf批量新增水印，並給pdf加密

設定路徑先設定路徑，把需要加水印的相關文件放入一個目錄下。我的目錄是：E:\python\test\pdf批量加水印os.chdir('E:\\python\\test\\pdf批量加水印\\') 準備水印pdf檔案如下程式碼所示。若水印為中文，先

Js動態追加行，並將內容儲存到資料庫，並取出資料通過js動態顯示

實現步驟講解: 首先需要在html頁面建立一個table表格和一個動態新增行的按鈕 <input type="button" onclick="addT（）" value="新增" /> 然後實現表格中追加行的js方法 //新增動態行(可在實現的列中新增相應的滑鼠事

自定義RadioGroup動態新增RadioButton，並獲取選中radioButton的位置

一，自定義的radioGroup，根據專案需求，需要實現考試試卷中單選題形式，其中，在選項前面要有正確答案的提示，例如：（答案）A 選項內容，且前面（答案）隱藏，在返回上一題時，正確答案前的這個標誌會顯示出來，所以需要我們自定義控制元件繼承radiogroup，其中每

JS動態新增的屬性Form不能提交的問題

這兩天開發過程中，遇到一個很詭異的問題。 JSP提交的時候那些固定寫在form中的input的資料一個沒少，缺少的是由JS動態寫入form中的input。（但是IE可以提交成功，火狐，chrome都無法提交）　　難道是為了安全性，JS動態寫入的input不讓提交？查了很多

JS動態新增移除事件和獲取Event (相容IE和Firefox)

今天小弄了一下JS事件，主要說一下FF和IE相容的問題物件名.addEventListener("事件名（不帶ON）"，函式名，true/false);(FF下) 物件名.attachEvent("事件名"，函式名);(IE下) 說明：　　事件名稱，要注意的是"

js動態新增input按鈕並給按鈕增加onclick的函式事件(帶引數)

相關推薦