Javascript无法处理Js加载表

时间:2017-08-22 21:55:36

标签: javascript html

我正在使用使用Javascript将Google Spreadsheet表格转换为HTML表格的sheetstotables。使用了一个漂亮的高亮脚本,以便我可以突出显示关键字。当我使用这个fiddle来测试表格是原始HTML时,它有用。但是,相同的脚本似乎不适用于通过Javascript加载的表格,可以在此fiddle

中看到

代码(工作)HTML

    <input id = "search" type ="text" value = "cy">
<div class = "searchable"><table>
  <tr>
    <th>cy</th>
    <th>cy</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table></div>

的Javascript

if($('#search').val().length !== 0){
   $('td').each(function(){
   var search_value = $("#search").val();
   var search_regexp = new RegExp(search_value, "g");
   $(this).html($(this).html().replace(search_regexp,"<a class = 'highlight'>"+search_value+"</a>"));
 });
 }

的CSS

.highlight {
             font-weight:bold;
             color:green;
             display: block;
             background: #000;
}

代码(不工作)HTML

<input id = "search" type ="text" value = "GK">

<div class="sheetstotables"></div>
<script type="text/javascript">
var tableId = "m4CB4"
var x = document.createElement("script"); x.type = "text/javascript"; x.async = true;
x.src = "http://www.sheetstotables.com/get_table.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(x, s);
</script>

的Javascript

if($('#search').val().length !== 0){
   $('td').each(function(){
   var search_value = $("#search").val();
   var search_regexp = new RegExp(search_value, "g");
   $(this).html($(this).html().replace(search_regexp,"<a class = 'highlight'>"+search_value+"</a>"));
 });
 }

的CSS

.highlight {
             font-weight:bold;
             color:green;
             display: block;
             background: #000;
}

1 个答案:

答案 0 :(得分:-2)

尝试以下(已编辑)

<input id = "search" type ="text" value = "GK">

<div class="sheetstotables"></div>
<script type="text/javascript">
var tableId = "m4CB4";
var x = document.createElement("script")
x.type = "text/javascript"; 
x.async = true;
x.src = "http://www.sheetstotables.com/get_table.js";
var s = document.getElementsByTagName("script")     
s[0].parentNode.insertBefore(x, s);
</script>

我希望它有所帮助