Question

我正在尝试解析一个不在我的html文件中的表，我从一个字符串中得到一个完整的HTML文件，然后我把它放在我自己的div中。

我已经能够用CSS修改它，但是jQuery或者Javascript似乎都可以在里面玩这个表。

我得到的内容是这样的：

$(document).ready(function(){  
    $.get("untouchable-url-on-my-host",function(data,status){       
        $("#content").html(data);   
    });
});

我的div内容总是出现在这样的字体代码中：

<div id="content"></div>

这会在div上生成一个巨大的表格，我想解析它的内容。

我认为解析原始字符串是为了替换文本：

'td class'

到

'td id="number" class'

但我确实需要一个循环来执行非重复相同的ids技巧，但我无法做到。

有什么想法吗？

Answer 1

您可以将HTML字符串转换为jquery对象，如下所示：

var jqueryObject = $(data);

使用此对象，您可以更改td。下面是一个如何使用class =“class”属性更改td并将该元素设置为id =“number”的示例：

jqueryObject.find('td.class').attr('id', 'number');

完成对HTML的任何修改后，您可以将jquery对象添加到DOM中，如下所示：

$('#content').append(jqueryObject);

Answer 2

我用它作为测试目的：

            var temp = '<table><tr><td class="yourclass">sdfdf</td><td class="yourclass">sds</td></tr></table>';

             var occurence_count = temp.match(/td class/g).length;
             for(i = 1; i<=occurence_count; i++){
                            temp = temp.replace(new RegExp('td class', ''), 'td id="my_cusom_id-' + i+'" class');
            }

            console.log(temp);

它会显示结果。在我的情况下，我得到了occurence_count = 2

或者您可以使用以修改方式发布的答案

            $.get("untouchable-url-on-my-host",function(data,status){ 
             var $data = $(data);
            $data.find('td').each(function(){
                $(this).attr('id', 'my_custom_id_'+ $(this).index());
            $("#content").append($data);
            });
            }

您可以尝试此解决方案

            $.get("untouchable-url-on-my-host",function(data,status){       
            var temp = data;
            var occurence_count = temp.match(/td class/g).length;
            for(i = 1; i<=occurence_count; i++){
               temp = temp.replace(new RegExp('td class', ''), 'td id="my_custom_id-' + i+'" class');
            }
              $("#content").html(temp);   

            }); });

Answer 3

确定有效，这里是代码：

$(document).ready(function(){  
$.get("untouchable-url-of-my-host",function(data,status){          

     var $data = $(data);
        $data.find('td').each(function(){
            $(this).attr('id', 'my_custom_id_'+ $(this).index());
        $("#content").append($data);


      });            
});
});

结果如下：

<table class="status" width="100%" border="0">
<tbody>
<tr>
<tr>
<td id="my_custom_id_0" class="statusEven">
<td id="my_custom_id_1" class="status">
<td id="my_custom_id_2" class="status">CRITICAL</td>
<td id="my_custom_id_3" class="status" nowrap="">07-10-2014 12:46:34</td>
<td id="my_custom_id_4" class="status" nowrap=""> 0d 2h 19m 42s</td>
<td id="my_custom_id_5" class="status">3/3</td>
<td id="my_custom_id_6" class="status" valign="center"> </td>
...

唯一的问题是ID在0到6的每个TR中都会重复xD，但我会想出来。

感谢!!!!

将id应用于不在html代码中的td元素

3 个答案: