Question

我有一张包含许多 td 的表格。当我单击按钮时，我想在 td 中包含一些html元素。如何使用＆＃34;这＆＃34;？

来解决此功能

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

所以你想重新使用clickMe功能吗？然后你应该将它全局放置并删除参数，这是不必要的。

顺便说一句：重复ID是不好的做法，但它仍然有效：

编辑：您应该使用onclick="clickMe.call(this)"将当前元素绑定到clickMe函数中的this。

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>

Answer 2

更改为：

＆＃13;

<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>

＆＃13;

Answer 3

$(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>

我真的不知道你想要什么，是这样的吗？

Answer 4

如果您只想将内容放在容器中，或者只是尝试这个：

//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!

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

您需要了解jQuery和javascript的工作原理，您的代码根本没有意义。请记住，如果您需要多次在页面上实现ID，那么ID应该是唯一的，您最好使用类。我创建了一个演示，以便您了解脚本应该如何工作。

我点击了按钮，点击3 td＆＃39; s，请注意我在jQuery按钮点击事件中引用了他们的ID。填充TD后，您将能够点击每个TD并输出其HTML内容。请参阅下面的脚本。

＆＃13;

       $(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());
               }
            });

＆＃13;

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

＆＃13;

    <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>

＆＃13;

＆＃34;这＆＃34;功能无法正常工作

5 个答案: