JSFiddle - React, Tailwind, and code Playground

by lparcerisa

HTML

<table style="width:300px" id="mytable">
<tr>
  <th>Firstname</th>
  <th>Lastname</th>	
  <th>Age</th>
  <th>Points</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>	
  <td>34</td>	
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>	
  <td>34</td>
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>	
  <td>34</td>
  <td>80</td>
</tr>
</table>
<input type="button" id="mergeme" name="" value="merge">

CSS

table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
.highlighted{
    background-color:#999;

}

JavaScript

$(function () {
      var isMouseDown = false;
      $("#mytable td")
        .mousedown(function () {
          isMouseDown = true;
          $(this).toggleClass("highlighted");
          return false; // prevent text selection
        })
        .mouseover(function () {
          if (isMouseDown) {
            $(this).toggleClass("highlighted");
          }
        })
        .bind("selectstart", function () {
          return false; // prevent text selection in IE
        });

      $(document)
        .mouseup(function () {
          isMouseDown = false;
             var mylength = $(".highlighted").length;
                       alert(mylength);

        });
    });
        $("#mergeme").click(function () {
                     $("td.highlighted").attr("colspan", mylength);
                });