Question

尝试使用IPython.display转换https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table页面但是JavaScript不会调用。

使用Jupyter Notebook中的IPython.display尝试转换https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table页面。提供我尝试过的代码。

    display(Javascript("""
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById(\"myInput\");
        filter = input.value.toUpperCase();
        table = document.getElementById(\"myTable\");
        tr = table.getElementsByTagName(\"tr\");
        for (i = 0; i < tr.length; i++)
        {
            td = tr[i].getElementsByTagName(\"td\")[0];
            if (td)
            {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = \"\";
                } else
                {
                    tr[i].style.display = \"none\";
                }
            }
        }
    """))

display(HTML(
"<!DOCTYPE html>"
"<html>"
"<head>"
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
"<style>"
"* {"
"  box-sizing: border-box;"
"}"

"#myInput {"
"  background-image: url('/css/searchicon.png');"
"  background-position: 10px 10px;"
"  background-repeat: no-repeat;"
"  width: 100%;"
"  font-size: 16px;"
"  padding: 12px 20px 12px 40px;"
"  border: 1px solid #ddd;"
"  margin-bottom: 12px;"
"}"

"#myTable {"
"  border-collapse: collapse;"
"  width: 100%;"
"  border: 1px solid #ddd;"
"  font-size: 18px;"
"}"

"#myTable th, #myTable td {"
"  text-align: left;"
"  padding: 12px;"
"}"

"#myTable tr {"
"  border-bottom: 1px solid #ddd;"
"}"

"#myTable tr.header, #myTable tr:hover {"
"  background-color: #f1f1f1;"
"}"
"</style>"
"</head>"
"<body>"

"<h2>My Customers</h2>"

"<input type=\"text\" id\"myInput\" onkeyup=\"myFunction()\" placeholder=\"Search for names..\" title=\"Type in a name\">"

"<table id=\"myTable\">"
"  <tr class=\"header\">"
"    <th style=\"width:60%;\">Name</th>"
"    <th style=\"width:40%;\">Country</th>"
"  </tr>"
"  <tr>"
"    <td>Alfreds Futterkiste</td>"
"    <td>Germany</td>"
"  </tr>"
"  <tr>"
"    <td>Berglunds snabbkop</td>"
"    <td>Sweden</td>"
"  </tr>"
"  <tr>"
"    <td>Island Trading</td>"
"    <td>UK</td>"
"  </tr>"
"  <tr>"
"    <td>Koniglich Essen</td>"
"    <td>Germany</td>"
"  </tr>"
"  <tr>"
"    <td>Laughing Bacchus Winecellars</td>"
"    <td>Canada</td>"
"  </tr>"
"  <tr>"
"    <td>Magazzini Alimentari Riuniti</td>"
"    <td>Italy</td>"
"  </tr>"
"  <tr>"
"    <td>North/South</td>"
"    <td>UK</td>"
"  </tr>"
"  <tr>"
"    <td>Paris specialites</td>"
"    <td>France</td>"
"  </tr>"
"</table>"
"</body>"
"</html>"
))

当我在搜索字段中输入一些文本后，便会期望要过滤的结果。

Javascript未在IPython.display中调用

0 个答案: