CODEWITHSUNDEEP
javascripthtmljquery
hp2345
hp2345

Reputation: 149

How to change background of <td> with jQuery

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 to 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 exciting:

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?

Full code snippet

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

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

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>

Upvotes: 1

Views: 139

Answers (1)

Viet
Viet

Reputation: 12777

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>

Upvotes: 6

Related Questions