编辑ajax加载的内容

Question

I have a HTML that loads a table from another page. I've got the CSS to work properly, but I can't edit the table using jQuery when it's pooled by the script, only when I have the table directly on the page. I'm guessing that maybe my changes are running before the load? I don't know..

I want to let you know that I'm not a programmer my self, but more of a curious person. I've searched around and found some things, but the lack of knowledge doesn't let me implement them. Hope you can help me.

The Script I use to read the data from the other page (p1.html)

<script type="text/javascript">
    var TimerLoad, TimerChange;
    var MaxNum, Rafraichir, Changement, ClassementReduit, ClassementReduitXpremier;
    var UrlRefresh, UrlChange;
    Rafraichir = 30000;
    Changement = 150000;
    MaxNum = 1;
    ClassementReduit = 0;
    ClassementReduitXpremier = 10;

    function Load(url, target) {
        var xhr;
        var fct;
        if (UrlChange) url = UrlRefresh;
        else UrlRefresh = url;
        UrlChange = 0;
        if (TimerLoad) clearTimeout(TimerLoad);
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP")
        } catch (e) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP")
            } catch (e2) {
                try {
                    xhr = new XMLHttpRequest
                } catch (e3) {
                    xhr = false
                }
            }
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200)
                if (ClassementReduit == 0) document.getElementById(target).innerHTML = xhr.responseText;
                else document.getElementById(target).innerHTML = ExtraireClassementReduit(xhr.responseText)
        };
        xhr.open("GET", url + "?r=" + Math.random(), true);
        xhr.send(null);
        fct = function() {
            Load(url, target)
        };
        TimerLoad = setTimeout(fct, Rafraichir)
    }

    function ExtraireClassementReduit(Texte) {
        var i, j, CompteurTD, CompteurTR;
        var ColPosition, ColNumero, ColNom, ColEcart1er;
        var Lignes;
        var NouveauTexte;
        CompteurTR = 0;
        ColPosition = -1;
        ColNumero = -1;
        ColNom = -1;
        ColEcart1er = -1;
        Texte = Texte.substring(Texte.indexOf("<tr"));
        Lignes = Texte.split("
");
        NouveauTexte = '<table width="100%" cellpadding="0" cellspacing="0">';
        for (i = 0; i < Lignes.length; i++)
            if (Lignes[i].substring(0, 3) == "<tr") {
                NouveauTexte += Lignes[i];
                CompteurTD = 0
            } else if (Lignes[i].substring(0, 4) == "</tr") {
            CompteurTR++;
            if (CompteurTR == ClassementReduitXpremier + 1) break
        } else if (Lignes[i].substring(0, 3) == "<td") {
            if (CompteurTR == 0)
                if (Lignes[i].indexOf("\"Id_Position\"") != -1) {
                    ColPosition = CompteurTD;
                    NouveauTexte += Lignes[i].replace(/ width=".*"/i, "")
                } else if (Lignes[i].indexOf("\"Id_Numero\"") != -1) {
                ColNumero = CompteurTD;
                NouveauTexte += Lignes[i].replace(/ width=".*"/i, "")
            } else if (Lignes[i].indexOf("\"Id_Nom\"") != -1) {
                ColNom = CompteurTD;
                NouveauTexte += Lignes[i].replace(/ width=".*"/i, "")
            } else {
                if (Lignes[i].indexOf("\"Id_Ecart1er\"") != -1) {
                    ColEcart1er = CompteurTD;
                    NouveauTexte += Lignes[i].replace(/ width=".*"/i, "")
                }
            } else if (CompteurTD == ColPosition || CompteurTD == ColNumero || CompteurTD == ColNom || CompteurTD == ColEcart1er) NouveauTexte += Lignes[i];
            CompteurTD++
        }
        NouveauTexte += "</table>";
        return NouveauTexte
    }

    function Change() {
        var Num, Index;
        if (document.forms["Changement"].chkChangement.checked) {
            Index = UrlRefresh.indexOf(".");
            Num = parseInt(UrlRefresh.substring(1, Index)) + 1;
            if (Num > MaxNum) Num = 1;
            UrlRefresh = "p" + Num + ".html";
            UrlChange = 1;
            fct = function() {
                Change()
            };
            TimerChange = setTimeout(fct, Changement)
        } else if (TimerChange) clearTimeout(TimerChange)
    };
</script>

Loading the table into the body

$(document).ready(Load('p1.html', 'result'));

The code I need to run after (it works with the table directly on page or even on a button, but I can't get to work on page load)

function show_hide_column(col_id, do_show) {
  var stl;
  if (do_show) stl = 'block'
  else stl = 'none';

  var tbl = document.getElementsByTagName('table')[0];
  var index = document.getElementById(col_id).cellIndex;
  var rows = tbl.getElementsByTagName('tr');

  for (var row = 0; row < rows.length; row++) {
    var cels = rows[row].getElementsByTagName('td')
    cels[index].style.display = stl;
  }
}


function hide() {
  show_hide_column("Id_Position", false);
  show_hide_column("Id_Equipe", false);
  show_hide_column("Id_Vehicule", false);
}

Answer 1

I fired a console.log() message for every stage of the previous code, to know when exactly the table was added to the page, to then hide the columns. Got it to work.