将 Jquery 代码转换为 javascript 代码

Question

I have a code which I want to convert into javascript, but unable to do it. I also took help from online jquery to javascript converters. It is for making large grid table responsive to mobile devices.

$(document).ready(function() {
  var switched = false;
  var updateTables = function() {
    if (($(window).width() < 767) && !switched ){
      switched = true;
      $("table.responsive").each(function(i, element) {
        splitTable($(element));
      });
      return true;
    }
    else if (switched && ($(window).width() > 767)) {
      switched = false;
      $("table.responsive").each(function(i, element) {
        unsplitTable($(element));
      });
    }
  };
   
  $(window).load(updateTables);
  $(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for
  $(window).on("resize", updateTables);
   
    
    function splitTable(original)
    {
        original.wrap("<div class='table-wrapper' />");
        
        var copy = original.clone();
        copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
        copy.removeClass("responsive");
        
        original.closest(".table-wrapper").append(copy);
        copy.wrap("<div class='pinned' />");
        original.wrap("<div class='scrollable' />");

    setCellHeights(original, copy);
    }
    
    function unsplitTable(original) {
    original.closest(".table-wrapper").find(".pinned").remove();
    original.unwrap();
    original.unwrap();
    }

  function setCellHeights(original, copy) {
    var tr = original.find('tr'),
        tr_copy = copy.find('tr'),
        heights = [];

    tr.each(function (index) {
      var self = $(this),
          tx = self.find('th, td');

      tx.each(function () {
        var height = $(this).outerHeight(true);
        heights[index] = heights[index] || 0;
        if (height > heights[index]) heights[index] = height;
      });

    });

    tr_copy.each(function (index) {
      $(this).height(heights[index]);
    });
  }

});

This is code of zurb-foundation responsive table. But it written in jquery and I am using it with react and it uses only jquery to package and because of it code is not propper working.

Answer 1

Have you tried npm (jquery) package if you are using function base component then first install jquery package npm i jquery then import it like

import React from 'react'
import $ from 'jquery';
const temp = () => {
    $(document).ready(function () {
        var switched = false;
        var updateTables = function () {
            if (($(window).width() < 767) && !switched) {
                switched = true;
                $("table.responsive").each(function (i, element) {
                    splitTable($(element));
                });
                return true;
            }
            else if (switched && ($(window).width() > 767)) {
                switched = false;
                $("table.responsive").each(function (i, element) {
                    unsplitTable($(element));
                });
            }
        };

        $(window).load(updateTables);
        $(window).on("redraw", function () { switched = false; updateTables(); }); // An event to listen for
        $(window).on("resize", updateTables);


        function splitTable(original) {
            original.wrap("<div class='table-wrapper' />");

            var copy = original.clone();
            copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
            copy.removeClass("responsive");

            original.closest(".table-wrapper").append(copy);
            copy.wrap("<div class='pinned' />");
            original.wrap("<div class='scrollable' />");

            setCellHeights(original, copy);
        }

        function unsplitTable(original) {
            original.closest(".table-wrapper").find(".pinned").remove();
            original.unwrap();
            original.unwrap();
        }

        function setCellHeights(original, copy) {
            var tr = original.find('tr'),
                tr_copy = copy.find('tr'),
                heights = [];

            tr.each(function (index) {
                var self = $(this),
                    tx = self.find('th, td');

                tx.each(function () {
                    var height = $(this).outerHeight(true);
                    heights[index] = heights[index] || 0;
                    if (height > heights[index]) heights[index] = height;
                });

            });

            tr_copy.each(function (index) {
                $(this).height(heights[index]);
            });
        }

    });
    return (
        <div>temp</div>
    )
}

export default temp

Your code will look like this