stackoom
  简体   繁体   中英

How to change background of td with jQuery

 原文  2020-12-13 03:10:01  1   1    javascript/ html/ jquery

Question

I have this program with a table and if you double click the td's you're given 3 buttons that can "edit" the double clicked td:

  1. you can change the text with one button, (1st button)
  2. You can change the background color to red with another button (2nd button)
  3. You delete everything in the td with the last button (3rd button)

Right now, I'm not sure how write the functions for all three of the buttons. But I'll choose to ask about how to change the background of a td with a button when the button is clicked this function is excited:

    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");
    });
    });

but this doesn't change the background of the double clicked td. What am I doing wrong.

Here is the full version of my code: 

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

1 answers

solution1
 5 ACCPTED  2020-12-13 03:51:01

The problem here is that you are assigning clickedTD to the cell's id, not the cell itself: clickedTD = event.target.id;

Should be: 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();
      
      }
    });
  });
 
    
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;
}
 
    
<!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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to change background color of my two td's using jQuery? How to change background color of td elements based on th using jquery how to change background color of multiple td elements using jquery How to change the background image of TD? how to change background-color of td elements based on other td elements using jquery Unable to change TD background color using jQuery change background-color td with jquery JavaScript: How to change the background color of each td? how to change td background color after click jQuery how to use td background color
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM