那些遇到过的问题

如何使用 jQuery 更改 <td> 的背景

hp2*_*345 1 html javascript jquery

我有一个带有表格的程序，如果你双击TD's 你会得到 3 个可以“编辑”双击的按钮TD：

  1. 您可以一键更改文本（第一个按钮）
  2. 您可以使用另一个按钮（第二个按钮）将背景颜色更改为红色
  3. 您TD使用最后一个按钮（第三个按钮）删除所有内容

现在，我不确定如何为所有三个按钮编写功能。但是我会选择询问如何在TD单击按钮时更改带有按钮的背景这个功能令人兴奋：

var clickedTD;

$(function () {
    $("td").dblclick(function (e) {
        $("#editHeader").css("display","block");
        clickedTD = event.target.id;
    });
});

$(function () {
    $(redBg).click(function (e) {
        $(clickedTD).css("background-color", "red");
    });
});
Run Code Online (Sandbox Code Playgroud)

但这不会改变双击的背景TD。我究竟做错了什么？

完整的代码片段

JavaScript

function addElement() {
    var text = document.getElementById("input").value;

    // create a new div element and give it a unique id
    var newDiv = document.createElement("div");
    newDiv.id = "temp";

    // and give it some content
    var newContent = document.createTextNode(text);

    // add the text node to the newly created div
    newDiv.appendChild(newContent);

    // add the newly created element and its content into the DOM
    var currentDiv = document.getElementById("div1");
    document.body.insertBefore(newDiv, currentDiv);

    $(function () {
        var td = document.getElementsByTagName("td");
        var div = document.getElementsByTagName("div");

        $(div).draggable();
        $("#temp").draggable();

        $(td).droppable({
            drop: function (event, ui) {
                $(this).addClass("div").html(text);
                $("div").draggable();

                $("#temp").remove();
            },
        });
    });

    document.getElementById("input").value = " ";
}

var editTxt = document.getElementById("editTxt");
var redBg = document.getElementById("redBg");
var del = document.getElementById("del");
var clickedTD;

$(function () {
    $("td").dblclick(function (e) {
        $("#editHeader").css("display", "block");
        clickedTD = event.target.id;
    });
});

function closeEditH() {
    $("#editHeader").css("display", "none");
}

//edit text

$(function () {
    $(editTxt).click(function (e) {
        alert(".html() ... I'm not sure");
    });
});

//edit color

$(function () {
    $(redBg).click(function (e) {
        $(clickedTD).css("background-color", "red");
    });
});

//delete

$(function () {
    $(del).click(function (e) {
        $(clickedTD).parent().html("").removeClass("div");
        $("#editHeader").css("display", "none");
        alert("Wil this work in clearing the class and text?");
    });
});

function updateVal(currentEle, value) {
    $(currentEle).html(
        '<input class="thVal" type="text" value="' + " " + '" />'
    );
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
            $("#editHeader").css("display", "none");
        }
    });

    $(document).click(function () {
        $(currentEle).html($(".thVal").val().trim());
        $("#editHeader").css("display", "none");
    });
}

//"trash can"

$(function () {
    var trash = document.getElementById("trash");

    $(trash).droppable({
        drop: function (event, ui) {
            let removeEl = document.querySelector(
                "#" + ui.draggable[0].getAttribute("id")
            );
            removeEl.remove();
        },
    });
});
Run Code Online (Sandbox Code Playgroud)

CSS

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

div {
    text-align: center;
    border: 1px solid #d3d3d3;
    width: 100px;
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}


.div {
    text-align: center;
    padding: 10px;
    cursor: move;
    background-color: #2196F3;
    color: #fff;
}

.redBG {
    text-align: center;
    padding: 10px;
    cursor: move;
    background-color: red;
    color: #fff;
}

td {
    border: 1px solid #d3d3d3;
    padding: 10px;
    height: 20px;
    width: 200px;
}
Run Code Online (Sandbox Code Playgroud)

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>repl.it</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link
            rel="stylesheet"
            href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
        />
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>

    <body>
        <header id="schedule">
            <p>Double click a td to edit:</p>

            <table border="1">
                <tr>
                    <td width="100" height="50" id="td1"></td>
                    <td width="100" height="50" id="td1"></td>
                    <td width="100" height="50" id="td1"></td>
                </tr>
            </table>

            <header id="editHeader" style="display: none">
                <p>Edit:</p>
                <button id="editTxt">Edit Text</button>
                <br />
                <p>Edit color:</p>
                <button id="redBg">Red</button>
                <br />
                <p>Delete all content in td:</p>
                <button id="del">Delete</button>
                <p height="20px"></p>
                <button onclick="closeEditH()">Close</button>
            </header>
        </header>
    </body>

    <script src="script.js"></script>
</html>
Run Code Online (Sandbox Code Playgroud)

Vie*_*iet 6

这里的问题是您将 clickedTD 分配给单元格的 id，而不是单元格本身： clickedTD = event.target.id;

应该是：clickedTD = event.target;









function addElement () { 
  
  var text = document.getElementById("input").value;
  
  // create a new div element and give it a unique id
  var newDiv = document.createElement("div");
  newDiv.id = 'temp'

  // and give it some content
  var newContent = document.createTextNode(text); 
  
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 

  $(function() {
    
    var td = document.getElementsByTagName('td');
    var div = document.getElementsByTagName('div');

    $(div).draggable();
    $("#temp").draggable();

    $(td).droppable({
      drop: function( event, ui ) { 
          $( this )
          .addClass("div")
            .html( text );
              $("div").draggable();

          $( "#temp" ).remove();
      }
    });
  });


  document.getElementById("input").value = " ";

}

var editTxt = document.getElementById("editTxt");
var redBg = document.getElementById("redBg");
var del = document.getElementById("del");
var clickedTD;

$(function () {
    $("td").dblclick(function (e) {
        $("#editHeader").css("display","block");
        clickedTD = event.target.id;
    });
});


function closeEditH(){
  $("#editHeader").css("display","none");
}

//edit text

  $(function () {
    $(editTxt).click(function (e) {
        alert(".html() ... I'm not sure");
    });
});

//edit color

  $(function () {
    $(redBg).click(function (e) {
        $(clickedTD).css("background-color", "red");
    });
});

//delete

 $(function () {
    $(del).click(function (e) {
          $(clickedTD).parent().html("").removeClass("div");
          $("#editHeader").css("display","none");
          alert("Wil this work in clearing the class and text?");
    });
});

function updateVal(currentEle, value) {
    $(currentEle).html('<input class="thVal" type="text" value="' + " " + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
             $("#editHeader").css("display","none");
        }
    });

    $(document).click(function () {
            $(currentEle).html($(".thVal").val().trim());
            $("#editHeader").css("display","none");
    });



}






  //"trash can"


  $(function() {
    
    var trash = document.getElementById('trash');

    $(trash).droppable({
      drop: function( event, ui ) {
      let removeEl = document.querySelector('#' + ui.draggable[0].getAttribute('id'))
      removeEl.remove();
      
      }
    });
  });
Run Code Online (Sandbox Code Playgroud)

body{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

 div {
  text-align: center;
  border: 1px solid #d3d3d3;
  width: 100px;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}


.div {
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: #2196F3;
  color: #fff;
}

.redBG{
  text-align: center;
  padding: 10px;
  cursor: move;
  background-color: red;
  color: #fff;
}

td{
  border: 1px solid #d3d3d3;
  padding: 10px;
  height: 20px ;
  width: 200px;
}
Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>

<header id = "schedule">   
<p>Double click a td to edit:</p>

<table border="1">
<tr>
    <td width=100 height=50 id="td1"></td>
    <td width=100 height=50 id="td1"></td>
    <td width=100 height=50 id="td1"></td>
  </tr>
</table>


<header id="editHeader" style="display:none">
  <p>Edit:</p>
  <button id="editTxt">Edit Text</button>
  <br>
  <p>Edit color:</p>
  <button id="redBg">Red</button>
  <br>
  <p>Delete all content in td:</p>
  <button id="del">Delete</button>
  <p height=20px></p>
  <button onclick="closeEditH()">Close</button>
</header>




</header>


</body>



     <script src="script.js"></script>

</html>
Run Code Online (Sandbox Code Playgroud)






Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

104 次

最近记录：

4 年，3 月 前
相关归档
我可以在输入字段上使用:before或:after伪元素吗？ 648
在JavaScript中设置请求标头 61
Angular 1.5组件与旧指令 - 哪里是链接功能？ 58
在骨干网上添加请求标头 52
JavaScript - 将样式添加到控制台日志的文本中 43
在html中选择父目录 37
内联预格式化？ 31
浏览器中范围和选择之间的差异 22
如何在使用Webkit转换和转换时修复闪烁 19
如何使用Twitter Bootstrap水平居中Glyphicons 19
难疑归档
使用"let"和"var"在JavaScript中声明变量有什么区别？ 4199
grep一个文件,但显示几个周围的行？ 3277
什么是依赖注入？ 2984
如何禁用textarea的resizable属性？ 2541
JavaScript等效于printf/String.Format 1874
打印Java数组最简单的方法是什么？ 1852
如何在git中按名称命名和检索存储？ 1276
如何配置git在本地忽略某些文件？ 1237
如何使用jQuery更改超链接的href 1231
什么是在Vim中评论/取消注释行的快速方法？ 1081
Copyright Info

© Copyright 2013-2021 admin@qa.1r1g.com

如未特别说明，本网站的内容使用如下协议:
Creative Commons Atution-NonCommercial-ShareAlike 4.0 International license.

用以下方式浏览
参考资料
回到顶部
网安备44200002443738
粤ICP备19038133号