询问:如何利用getAttribute()来为一个元素添加onClick()事件?

时间:2022-04-22 12:00:55
我利用document.createElement("input")在表格中创建了一个按钮,我想为其添加一个onClick时间。问题就出现了,好象该事件不用人为驱动,它自己直接就运行了。如           
input_node.type = "button"
input_node.name = "B" + new_rows + "_" + col_counter
input_node.disabled = false
input_node.value = "删除此行"
input_node.setAttribute("onclick", remove_row(this.form))
结果还没等我看到该按钮出现,它就被删掉了。

有谁能告诉我应该怎么办吗?
谢谢!

13 个解决方案

#1


错了,是利用setAttribute()来添加。

#2


-->
input_node.setAttribute("onclick","remove_row(this.form)")

input_node.onclick="remove_row(this.form)"

#3


input_node.setAttribute("onclick", remove_row(this.form))
你这里这句话已经运行了remove_row(this.form)

#4


是啊,是啊,我想要的是等待人的交互动作再做出反应!

#5


是什么^_^你试试我上面的写法就可以了

#6


不行的,我试了,如果加上“”,就没反应了!不加反倒可以删掉。
难道是我的remove_row()函数出错了?那也不会在不加“”时自动删除!

#7


你把代码帖出来看看

#8


<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>用户ID</title>
<style>
<!--
td           { font-size: 9pt }
-->
</style>
<script language="javascript" type="text/javascript" src="users_records.js">
</script>

<script language="javascript" type="text/javascript">
<!--

var new_rows = 1
var table_rows

function insert_row(current_form) {
    // Get the reference row number
    var reference_row = 1
    
    // Get the table body
    var tbody_node = document.getElementById("tablebody").childNodes[0]
    //alert(tbody_node.outerHTML)
    
    // Get the reference row element
    var reference_node = tbody_node.childNodes[0]
    //alert(reference_node.outerHTML)

    // Create the new <tr> element
    var new_tr_node = document.createElement("tr")
    var inserted_node = tbody_node.insertBefore(new_tr_node, reference_node)


    // Get the number of columns
    var table_columns = 6
    //alert(table_columns)
/*
    var td_node = document.createElement("td")
    inserted_node.appendChild(td_node)
    
    var input_node = document.createElement("input")
    input_node.type = "text"
*/

    // Loop to add all the <td> elements (columns) in the inserted row
    for (var col_counter = 1; col_counter <= table_columns; col_counter++) {
        var td_node = document.createElement("td")
        inserted_node.appendChild(td_node)
        
        // Add input(type=text) to the current cell
        var input_node = document.createElement("input")
        input_node.type = "text"
        input_node.name = "T" + new_rows + "_" + col_counter
        input_node.disabled = true

        if(col_counter <= 2){
           input_node.type = "text"
           input_node.name = "T" + new_rows + "_" + col_counter
           input_node.disabled = true
           input_node.size = "20"
           //input_node.value = "T" + new_rows + "_" + col_counter
        }else if(col_counter >2 && col_counter <5){
           input_node.type = "text"
           input_node.name = "T" + new_rows + "_" + col_counter
           input_node.disabled = true
           input_node.size = "8"
        }else if (col_counter == 5){
           input_node.type = "button"
           input_node.name = "B" + new_rows + "_" + col_counter
           input_node.disabled = false
           input_node.value = "添加"
        }else{
           input_node.type = "button"
           input_node.name = "B" + new_rows + "_" + col_counter
           input_node.disabled = false
           input_node.value = "删除此行"
           input_node.setAttribute("onclick", remove_row(this.form))
           //input_node.onclick = "remove_row(this.form)"
           //input_node.mousedown = remove_row(this.form)
        }
            
        // Add a text node to the current cell
        //var input_node = document.createTextNode("New Row " + new_rows + " Col " + col_counter)
        td_node.appendChild(input_node)
    }
    
    // Increment the total number of new and existing rows
    new_rows++
    table_rows++

}

function remove_row(current_form){
   
   alert("running!")
   // Get the table body
   var tbody_node = document.getElementById("tablebody").childNodes[0]
   alert(tbody_node.outerHTML)
   
   // Get the row number that will be cloned
   var row_number = 1
   
   // Get the row element to be deleted
   var row_node = tbody_node.childNodes[0]
   
   // Remove it
   tbody_node.removeChild(row_node)
   
   // Decrement the total number of table rows
   table_rows--
   
}

-->
</script>
</head>

<body>
<form method="POST" action="--WEBBOT-SELF--" name="username">
 
<table border="1" width="58%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" height="48">
<script language="javascript" type="text/javascript">
<!--

   // Write the table headers
   document.writeln('<tr>')
   document.writeln('<td width="15%" align="center" bgcolor="#E6E6E6" height="16">用户ID</td>')
   document.writeln('<td width="24%" align="center" bgcolor="#E6E6E6" height="16">用户名</td>')
   document.writeln('<td width="7%" align="center" bgcolor="#E6E6E6" height="16">性别</td>')
   document.writeln('<td width="8%" align="center" bgcolor="#E6E6E6" height="16">年龄</td>')
   document.writeln('<td width="34%" align="center" bgcolor="#E6E6E6" height="16">添加</td>')
   document.writeln('<td width="21%" align="center" bgcolor="#E6E6E6" height="16">删除</td>')
   document.writeln('<\/tr>')
   

-->
</script>
</table>
<table border="1" width="58%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" height="48" id="tablebody">
  <tr>
    <td width="15%" height="28"><input type="text" name="T1" size="20"></td>
    <td width="24%" height="28"><input type="text" name="T2" size="20"></td>
    <td width="7%" height="28"><input type="text" name="T3" size="8"></td>
    <td width="8%" height="28"><input type="text" name="T4" size="8"></td>
    <td width="34%" height="28"><input type="button" value="添加" name="B5"></td>
    <td width="21%" height="28"><input type="button" value="删除此行" name="B4"></td>
  </tr>
</table>
  <p><input type="button" value="增加一行" name="B3" onclick="insert_row(this.form)">
  <input type="submit" value="提交" name="B1"><input type="button" value="平均年龄" name="B6"><input type="text" name="T5" size="7">岁</p>
</form>
</body>
</html>

#9


没人知道吗?
请帮帮我!
谢谢。

#10


Try,....

<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>用户ID</title>
<style>
<!--
td           { font-size: 9pt }
-->
</style>
<script language="javascript" type="text/javascript" src="users_records.js">
</script>

<script language="javascript" type="text/javascript">
<!--

var new_rows = 1
var table_rows

function insert_row(current_form) {
    // Get the reference row number
    var reference_row = 1
    
    // Get the table body
    var tbody_node = document.getElementById("tablebody").childNodes[0]
    //alert(tbody_node.outerHTML)
    
    // Get the reference row element
    var reference_node = tbody_node.childNodes[0]
    //alert(reference_node.outerHTML)

    // Create the new <tr> element
    var new_tr_node = document.createElement("tr")
    var inserted_node = tbody_node.insertBefore(new_tr_node, reference_node)


    // Get the number of columns
    var table_columns = 6
    //alert(table_columns)
/*
    var td_node = document.createElement("td")
    inserted_node.appendChild(td_node)
    
    var input_node = document.createElement("input")
    input_node.type = "text"
*/

    // Loop to add all the <td> elements (columns) in the inserted row
    for (var col_counter = 1; col_counter <= table_columns; col_counter++) {
        var td_node = document.createElement("td")
        inserted_node.appendChild(td_node)
        
        // Add input(type=text) to the current cell
        var input_node = document.createElement("input")
        input_node.type = "text"
        input_node.name = "T" + new_rows + "_" + col_counter
        input_node.disabled = true

        if(col_counter <= 2){
           input_node.type = "text"
           input_node.name = "T" + new_rows + "_" + col_counter
           input_node.disabled = true
           input_node.size = "20"
           //input_node.value = "T" + new_rows + "_" + col_counter
        }else if(col_counter >2 && col_counter <5){
           input_node.type = "text"
           input_node.name = "T" + new_rows + "_" + col_counter
           input_node.disabled = true
           input_node.size = "8"
        }else if (col_counter == 5){
           input_node.type = "button"
           input_node.name = "B" + new_rows + "_" + col_counter
           input_node.disabled = false
           input_node.value = "添加"
        }else{
           input_node.type = "button"
           input_node.name = "B" + new_rows + "_" + col_counter
           input_node.disabled = false
           input_node.value = "删除此行"
           //input_node.setAttribute("onclick", remove_row(this.form))
           input_node.onclick = remove_row
           //input_node.mousedown = remove_row(this.form)
        }
            
        // Add a text node to the current cell
        //var input_node = document.createTextNode("New Row " + new_rows + " Col " + col_counter)
        td_node.appendChild(input_node)
    }
    
    // Increment the total number of new and existing rows
    new_rows++
    table_rows++

}

function remove_row(){
   
   alert("running!")
   // Get the table body
   var tbody_node = document.getElementById("tablebody").childNodes[0]
   alert(tbody_node.outerHTML)
   
   // Get the row number that will be cloned
   var row_number = 1
   
   // Get the row element to be deleted
   var row_node = tbody_node.childNodes[0]
   
   // Remove it
   tbody_node.removeChild(row_node)
   
   // Decrement the total number of table rows
   table_rows--
   
}

-->
</script>
</head>

<body>
<form method="POST" action="--WEBBOT-SELF--" name="username">
 
<table border="1" width="58%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" height="48">
<script language="javascript" type="text/javascript">
<!--

   // Write the table headers
   document.writeln('<tr>')
   document.writeln('<td width="15%" align="center" bgcolor="#E6E6E6" height="16">用户ID</td>')
   document.writeln('<td width="24%" align="center" bgcolor="#E6E6E6" height="16">用户名</td>')
   document.writeln('<td width="7%" align="center" bgcolor="#E6E6E6" height="16">性别</td>')
   document.writeln('<td width="8%" align="center" bgcolor="#E6E6E6" height="16">年龄</td>')
   document.writeln('<td width="34%" align="center" bgcolor="#E6E6E6" height="16">添加</td>')
   document.writeln('<td width="21%" align="center" bgcolor="#E6E6E6" height="16">删除</td>')
   document.writeln('<\/tr>')
   

-->
</script>
</table>
<table border="1" width="58%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" height="48" id="tablebody">
  <tr>
    <td width="15%" height="28"><input type="text" name="T1" value=100 size="20"></td>
    <td width="24%" height="28"><input type="text" name="T2" size="20"></td>
    <td width="7%" height="28"><input type="text" name="T3" size="8"></td>
    <td width="8%" height="28"><input type="text" name="T4" size="8"></td>
    <td width="34%" height="28"><input type="button" value="添加" name="B5"></td>
    <td width="21%" height="28"><input type="button" value="删除此行" onclick=remove_row() name="B4"></td>
  </tr>
</table>
  <p><input type="button" value="增加一行" name="B3" onclick="insert_row(this.form)">
  <input type="submit" value="提交" name="B1"><input type="button" value="平均年龄" name="B6"><input type="text" name="T5" size="7">岁</p>
</form>
</body>
</html>

#11


快救救我啊! 我加分:150分,一定送到!
各位高手快来看看!

#12


谢谢,谢谢,终于解决了。
太感谢了!

送分

#13


还欠我150-60=90分:)

#1


错了,是利用setAttribute()来添加。

#2


-->
input_node.setAttribute("onclick","remove_row(this.form)")

input_node.onclick="remove_row(this.form)"

#3


input_node.setAttribute("onclick", remove_row(this.form))
你这里这句话已经运行了remove_row(this.form)

#4


是啊,是啊,我想要的是等待人的交互动作再做出反应!

#5


是什么^_^你试试我上面的写法就可以了

#6


不行的,我试了,如果加上“”,就没反应了!不加反倒可以删掉。
难道是我的remove_row()函数出错了?那也不会在不加“”时自动删除!

#7


你把代码帖出来看看

#8


<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>用户ID</title>
<style>
<!--
td           { font-size: 9pt }
-->
</style>
<script language="javascript" type="text/javascript" src="users_records.js">
</script>

<script language="javascript" type="text/javascript">
<!--

var new_rows = 1
var table_rows

function insert_row(current_form) {
    // Get the reference row number
    var reference_row = 1
    
    // Get the table body
    var tbody_node = document.getElementById("tablebody").childNodes[0]
    //alert(tbody_node.outerHTML)
    
    // Get the reference row element
    var reference_node = tbody_node.childNodes[0]
    //alert(reference_node.outerHTML)

    // Create the new <tr> element
    var new_tr_node = document.createElement("tr")
    var inserted_node = tbody_node.insertBefore(new_tr_node, reference_node)


    // Get the number of columns
    var table_columns = 6
    //alert(table_columns)
/*
    var td_node = document.createElement("td")
    inserted_node.appendChild(td_node)
    
    var input_node = document.createElement("input")
    input_node.type = "text"
*/

    // Loop to add all the <td> elements (columns) in the inserted row
    for (var col_counter = 1; col_counter <= table_columns; col_counter++) {
        var td_node = document.createElement("td")
        inserted_node.appendChild(td_node)
        
        // Add input(type=text) to the current cell
        var input_node = document.createElement("input")
        input_node.type = "text"
        input_node.name = "T" + new_rows + "_" + col_counter
        input_node.disabled = true

        if(col_counter <= 2){
           input_node.type = "text"
           input_node.name = "T" + new_rows + "_" + col_counter
           input_node.disabled = true
           input_node.size = "20"
           //input_node.value = "T" + new_rows + "_" + col_counter
        }else if(col_counter >2 && col_counter <5){
           input_node.type = "text"
           input_node.name = "T" + new_rows + "_" + col_counter
           input_node.disabled = true
           input_node.size = "8"
        }else if (col_counter == 5){
           input_node.type = "button"
           input_node.name = "B" + new_rows + "_" + col_counter
           input_node.disabled = false
           input_node.value = "添加"
        }else{
           input_node.type = "button"
           input_node.name = "B" + new_rows + "_" + col_counter
           input_node.disabled = false
           input_node.value = "删除此行"
           input_node.setAttribute("onclick", remove_row(this.form))
           //input_node.onclick = "remove_row(this.form)"
           //input_node.mousedown = remove_row(this.form)
        }
            
        // Add a text node to the current cell
        //var input_node = document.createTextNode("New Row " + new_rows + " Col " + col_counter)
        td_node.appendChild(input_node)
    }
    
    // Increment the total number of new and existing rows
    new_rows++
    table_rows++

}

function remove_row(current_form){
   
   alert("running!")
   // Get the table body
   var tbody_node = document.getElementById("tablebody").childNodes[0]
   alert(tbody_node.outerHTML)
   
   // Get the row number that will be cloned
   var row_number = 1
   
   // Get the row element to be deleted
   var row_node = tbody_node.childNodes[0]
   
   // Remove it
   tbody_node.removeChild(row_node)
   
   // Decrement the total number of table rows
   table_rows--
   
}

-->
</script>
</head>

<body>
<form method="POST" action="--WEBBOT-SELF--" name="username">
 
<table border="1" width="58%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" height="48">
<script language="javascript" type="text/javascript">
<!--

   // Write the table headers
   document.writeln('<tr>')
   document.writeln('<td width="15%" align="center" bgcolor="#E6E6E6" height="16">用户ID</td>')
   document.writeln('<td width="24%" align="center" bgcolor="#E6E6E6" height="16">用户名</td>')
   document.writeln('<td width="7%" align="center" bgcolor="#E6E6E6" height="16">性别</td>')
   document.writeln('<td width="8%" align="center" bgcolor="#E6E6E6" height="16">年龄</td>')
   document.writeln('<td width="34%" align="center" bgcolor="#E6E6E6" height="16">添加</td>')
   document.writeln('<td width="21%" align="center" bgcolor="#E6E6E6" height="16">删除</td>')
   document.writeln('<\/tr>')
   

-->
</script>
</table>
<table border="1" width="58%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" height="48" id="tablebody">
  <tr>
    <td width="15%" height="28"><input type="text" name="T1" size="20"></td>
    <td width="24%" height="28"><input type="text" name="T2" size="20"></td>
    <td width="7%" height="28"><input type="text" name="T3" size="8"></td>
    <td width="8%" height="28"><input type="text" name="T4" size="8"></td>
    <td width="34%" height="28"><input type="button" value="添加" name="B5"></td>
    <td width="21%" height="28"><input type="button" value="删除此行" name="B4"></td>
  </tr>
</table>
  <p><input type="button" value="增加一行" name="B3" onclick="insert_row(this.form)">
  <input type="submit" value="提交" name="B1"><input type="button" value="平均年龄" name="B6"><input type="text" name="T5" size="7">岁</p>
</form>
</body>
</html>

#9


没人知道吗?
请帮帮我!
谢谢。

#10


Try,....

<html>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>用户ID</title>
<style>
<!--
td           { font-size: 9pt }
-->
</style>
<script language="javascript" type="text/javascript" src="users_records.js">
</script>

<script language="javascript" type="text/javascript">
<!--

var new_rows = 1
var table_rows

function insert_row(current_form) {
    // Get the reference row number
    var reference_row = 1
    
    // Get the table body
    var tbody_node = document.getElementById("tablebody").childNodes[0]
    //alert(tbody_node.outerHTML)
    
    // Get the reference row element
    var reference_node = tbody_node.childNodes[0]
    //alert(reference_node.outerHTML)

    // Create the new <tr> element
    var new_tr_node = document.createElement("tr")
    var inserted_node = tbody_node.insertBefore(new_tr_node, reference_node)


    // Get the number of columns
    var table_columns = 6
    //alert(table_columns)
/*
    var td_node = document.createElement("td")
    inserted_node.appendChild(td_node)
    
    var input_node = document.createElement("input")
    input_node.type = "text"
*/

    // Loop to add all the <td> elements (columns) in the inserted row
    for (var col_counter = 1; col_counter <= table_columns; col_counter++) {
        var td_node = document.createElement("td")
        inserted_node.appendChild(td_node)
        
        // Add input(type=text) to the current cell
        var input_node = document.createElement("input")
        input_node.type = "text"
        input_node.name = "T" + new_rows + "_" + col_counter
        input_node.disabled = true

        if(col_counter <= 2){
           input_node.type = "text"
           input_node.name = "T" + new_rows + "_" + col_counter
           input_node.disabled = true
           input_node.size = "20"
           //input_node.value = "T" + new_rows + "_" + col_counter
        }else if(col_counter >2 && col_counter <5){
           input_node.type = "text"
           input_node.name = "T" + new_rows + "_" + col_counter
           input_node.disabled = true
           input_node.size = "8"
        }else if (col_counter == 5){
           input_node.type = "button"
           input_node.name = "B" + new_rows + "_" + col_counter
           input_node.disabled = false
           input_node.value = "添加"
        }else{
           input_node.type = "button"
           input_node.name = "B" + new_rows + "_" + col_counter
           input_node.disabled = false
           input_node.value = "删除此行"
           //input_node.setAttribute("onclick", remove_row(this.form))
           input_node.onclick = remove_row
           //input_node.mousedown = remove_row(this.form)
        }
            
        // Add a text node to the current cell
        //var input_node = document.createTextNode("New Row " + new_rows + " Col " + col_counter)
        td_node.appendChild(input_node)
    }
    
    // Increment the total number of new and existing rows
    new_rows++
    table_rows++

}

function remove_row(){
   
   alert("running!")
   // Get the table body
   var tbody_node = document.getElementById("tablebody").childNodes[0]
   alert(tbody_node.outerHTML)
   
   // Get the row number that will be cloned
   var row_number = 1
   
   // Get the row element to be deleted
   var row_node = tbody_node.childNodes[0]
   
   // Remove it
   tbody_node.removeChild(row_node)
   
   // Decrement the total number of table rows
   table_rows--
   
}

-->
</script>
</head>

<body>
<form method="POST" action="--WEBBOT-SELF--" name="username">
 
<table border="1" width="58%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" height="48">
<script language="javascript" type="text/javascript">
<!--

   // Write the table headers
   document.writeln('<tr>')
   document.writeln('<td width="15%" align="center" bgcolor="#E6E6E6" height="16">用户ID</td>')
   document.writeln('<td width="24%" align="center" bgcolor="#E6E6E6" height="16">用户名</td>')
   document.writeln('<td width="7%" align="center" bgcolor="#E6E6E6" height="16">性别</td>')
   document.writeln('<td width="8%" align="center" bgcolor="#E6E6E6" height="16">年龄</td>')
   document.writeln('<td width="34%" align="center" bgcolor="#E6E6E6" height="16">添加</td>')
   document.writeln('<td width="21%" align="center" bgcolor="#E6E6E6" height="16">删除</td>')
   document.writeln('<\/tr>')
   

-->
</script>
</table>
<table border="1" width="58%" bordercolor="#000000" cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" height="48" id="tablebody">
  <tr>
    <td width="15%" height="28"><input type="text" name="T1" value=100 size="20"></td>
    <td width="24%" height="28"><input type="text" name="T2" size="20"></td>
    <td width="7%" height="28"><input type="text" name="T3" size="8"></td>
    <td width="8%" height="28"><input type="text" name="T4" size="8"></td>
    <td width="34%" height="28"><input type="button" value="添加" name="B5"></td>
    <td width="21%" height="28"><input type="button" value="删除此行" onclick=remove_row() name="B4"></td>
  </tr>
</table>
  <p><input type="button" value="增加一行" name="B3" onclick="insert_row(this.form)">
  <input type="submit" value="提交" name="B1"><input type="button" value="平均年龄" name="B6"><input type="text" name="T5" size="7">岁</p>
</form>
</body>
</html>

#11


快救救我啊! 我加分:150分,一定送到!
各位高手快来看看!

#12


谢谢,谢谢,终于解决了。
太感谢了!

送分

#13


还欠我150-60=90分:)