「這個」功能不能正常工作

-1

我有一個表有很多td。當我點擊按鈕時，我想要一個td中的一些html元素。如何使用「this」解決此功能？「這個」功能不能正常工作

$(document).ready(function() { 
 
      $("button").click(function clickMe(e) { 
 
       $(this).html ("this is hai") 
 
      }); 
 
     });

table td { 
 
    border: 1px solid; 
 
    border-color: lightgray; 
 
    overflow:hidden; 
 
    height:17px; 
 
    /*max-height:10px;*/ 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 
<table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;"> 
 
     <tr> 
 
      <td id="container"onclick="clickMe(this)"></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
    </table> 
 
    <button id="container" > clickme</button> 
 
    </body> 
 
    </html>

來源

2016-06-24 manu padmanabhan

** 1。** ID應該是唯一的。 ** 2。**''clickMe'是_local_到'ready（）'。 ** 3。** .html（' – Tushar

也應該沒有空格，一旦你改變你的id類（這將是更可取的），那麼你可以在jquery $（'。container'）中使用。（'click'，function clickMe（e）{...}）;並從html中刪除onclick。 –

請給我一個完美的腳本使用此 –

變化：

<html> 
 
<head></head> 
 
    <body> 
 
     <table id="table_id"> 
 
      <tr> 
 
       <td>Td</td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
     </table> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <script> 
 
      $(document).ready(function() { 
 
       $("#table_id td").on("click",function(){ 
 
        $(this).html("this is hai"); 
 
      }) 
 
     })   
 
     </script> 
 
    </body> 
 
</html>

來源

2016-06-24 10:04:50 Ehsan

所以，你要resuse的clickMe功能？那麼你應該把它放在全局並刪除參數，這是沒有必要的。

順便說一句：在ID的重複是不好的做法，但它仍然工作：

編輯：您應該使用onclick="clickMe.call(this)"當前元素綁定到this在clickMe功能。

function clickMe() { 
 
    $(this).html ("this is hai") 
 
} 
 

 
$(document).ready(function() { 
 
    $("button").click(clickMe); 
 
});

table td { 
 
    border: 1px solid; 
 
    border-color: lightgray; 
 
    overflow:hidden; 
 
    height:17px; 
 
    /*max-height:10px;*/ 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 
<table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;"> 
 
     <tr> 
 
      <td id="container" onclick="clickMe.call(this)"></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
    </table> 
 
    <button id="container" > clickme</button> 
 
    </body> 
 
    </html>

來源

2016-06-24 10:06:29 MattDiMu

$(document).ready(function() { 
 
    $("#table_id td").on("click", function(){ 
 
    $(this).html("this is hai"); 
 
    }); 
 
});

#table_id td { 
 
    border: 1px solid; 
 
    border-color: lightgray; 
 
    overflow:hidden; 
 
    height:17px; 
 
} 
 

 
#table_id{ 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <body> 
 
    <table id="table_id"> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 
</html>

我真的不知道你想要什麼，是不是這樣？

來源

2016-06-24 10:06:40

如果你只是想要的內容放置在容器或只是試試這個：

//it is unclear to me _what you exactly want_ if _this_ is <b>not</b> what you want. Give me a comment on _what is not correct_ and i'll try to edit goodluck!

$('#my_button').on('click', function(){ 
 
$('#place_here').html ("this is hai") 
 

 
});

table td { 
 
    border: 1px solid; 
 
    border-color: lightgray; 
 
    overflow:hidden; 
 
    height:17px; 
 
    /*max-height:10px;*/ 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <body> 
 
<table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;"> 
 
     <tr> 
 
      <td id="container"></td> 
 
      <td id="place_here"></td> 
 
      <td></td> 
 
     </tr> 
 
    </table> 
 
    <button id="my_button"> clickme</button> 
 
    </body>

來源

2016-06-24 10:08:54

你需要了解如何jQuery和javascript作品，你的代碼根本沒有意義。記住ID應該是唯一的，如果你需要在頁面上多次實現它，你最好使用class。我創建了一個演示，以便您能夠理解腳本應該如何工作。

我做了你的按鈕，點擊時會填充3個TD，注意我引用了TD上的ID和jQuery按鈕點擊事件。填充TD後，您將能夠點擊每個TD並輸出其HTML內容。請參閱下面的腳本。

 $(document).ready(function() { 
 
       $("button").click(function(e) { 
 
        $("#td1").html ("this is hai displayed at td1"); 
 
        $("#td2").html ("this is hai displayed at td2"); 
 
        $("#td3").html ("this is hai displayed at td3"); 
 
       }); 
 
      
 
       window.clickMe = function (data){ 
 
       alert(jQuery(data).html()); 
 
       } 
 
      });

 table td { 
 
     border: 1px solid; 
 
     border-color: lightgray; 
 
     overflow:hidden; 
 
     height:17px; 
 
     /*max-height:10px;*/ 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <html> 
 
     <body> 
 
    <table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;" > 
 
      <tr> 
 
       <td id="td1" onclick="clickMe(this)"></td> 
 
       <td id="td2" onclick="clickMe(this)"></td> 
 
       <td id="td3" onclick="clickMe(this)"></td> 
 
      </tr> 
 
     </table> 
 
     <button id="container" > clickme</button> 
 
     </body> 
 
     </html>

來源

2016-06-24 10:16:20

「這個」功能不能正常工作

回答

相關問題