嵌套表，删除包含模式的内表
Posted
技术标签:
【中文标题】嵌套表，删除包含模式的内表【英文标题】：Nested tables, remove inner table containing pattern 【发布时间】：2013-05-07 19:22:36 【问题描述】：我又遇到了范围界定的问题（我猜）。我想编写一个尽可能通用的函数来检索页面并在将其内容设置为占位符之前删除其部分代码 (<DIV>)
下面是加载页面的示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>testtesttest</title>
</head>
<script type="text/javascript" src="/AJAX/jquery-1.6.4.min.js"></script>
<script type='text/javascript' src='/util.js'></script>
<body>
<div class='contentcontainer'>
<hr>
<div class='contentitem' id='restart' style="margin-top: 100px; margin-left: 100px; margin-bottom: 100px; display:block;">
<table>
<tr>
<td><img src='/images/warn__xl.gif'></td>
<td><p style="font-size: 1.2em; font-weight: bold; color:#02A3C1;">Loading: please wait...</p></td>
</tr>
</table>
</div>
<div class='contentitem' id='ready' style="margin-top: 100px; margin-left: 100px; margin-bottom: 100px; display:none;">
<div id="content">
</div>
</FORM>
</div>
</div>
<script type='text/javascript'>
var content = $("#content");
//var content = $("#ready");
//hide loading bar
function hideLoading()
loading.fadeTo(1000, 0);
;
$(document).ready(function()
content.load('/AJAX/test/cfg_3.html div .contentitem', function(content)
//$(this).find('table:not(:first-child)').css("font-style", "italic"); //just need to replace the css by remove() to remove what is italic.
$(this).find('table:eq(2)').css("font-style", "italic"); //just need to replace the css by remove() to remove what is italic.
/*$(this).find('table:contains("Content Based"):first-child').each(function(i)
//.css("display", "none");
// tabelle[i] = $(this).attr("onChange");
//$(this).attr("id",i)
alert(i);
);*/
$(this).find('tbody').each(function()
//$("tr").children("td").find('table:contains("Content Based"):first-child').each(function() $(this).css("font-style", "normal"););
$("tr").children("td").find('table:contains("Content Based")').each(function() $(this).css("background-color", "yellow"););
//$("tr").children("td").find('table:contains("Content Based"):first-child').each(function() $(this).remove(););
);
document.getElementById("restart").style.display = "none";
document.getElementById("ready").style.display = "block";
//alert('Load was performed.');
);
);
//intelligent version of submitform: will only refresh what was needed:
(function()
//
var proxied = submitForm;
submitForm = function(theForm, actionNo, flags, primkey, confirmMsg, anchor, eval_code, customP)
//potential issue with the switch language... I think actionNo = 0 means reload.
//alert('gotcha');
// Function submit a form
$.ajax(
//type: theForm.attr('method'),
//type: get,
//url: theForm.attr('action'),
//content.load('/AJAX/test/cfg_3.html div .contentitem', function(content)
url: "/AJAX/test/cfg_3.html",
//data: theForm.serialize(),
success: function (data)
alert('ok');
var dataHTML = $(data).html().filter("div .contentitem");
$(dataHTML).find('table:eq(2)').css("font-style", "bold"); //just need to replace the css by remove() to remove what is italic.
content.html(dataHTML);
);
return false;
)();
</script>
</body>
</html>
以及加载页面的摘录：
<HTML>
<HEADER>
<script type='text/javascript' src='/util.js'></script>
</HEADER>
<BODY>
<div class='contentcontainer'>
<hr>
<div class='contentitem'>
<table cellspacing='0' cellpadding='0'>
<tr>
<td class='icon' valign='top' width='100px'><img src='/images/webf__xl.gif' alt='Parental Control'></td>
<td class='data' valign='top'>
<table cellspacing='0' cellpadding='0'>
<tr>
<td align='left'><span class='itemtitle'>Parental Control</span></td>
<td align='right'></td>
</tr>
<tr>
<td colspan='2'>
<p>This page summarizes the configuration of your Thomson Gateway regarding web site filtering. </p>
<form name='SiteFilterCfg' action='/cgi/b/sfltr/cfg/' method='post'>
<br>
<table cellspacing='0' cellpadding='0' width='100%'>
<tr>
<td width='40' valign='top'><img src='/images/bull__md.gif' alt=''></td>
<td valign='top'>
<span class='blocktitle'>Title</span><br>
<table width='100%' class='datatable' cellspacing='0' cellpadding='0'>
<tr>
<td></td>
<td width='30px'></td>
<td width='220px'></td>
<td width='50px'></td>
</tr>
<tr>
<td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td>
</tr>
<tr>
<td width='170'>Use Address Based Filter:</td>
<td colspan='3'><input type='checkbox' name='30' value='1' ></td>
</tr>
<tr>
<td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td>
</tr>
<tr>
<td width='170'>Action:</td>
<td colspan='3'>
<select name='31' style='width: 270px'>
<option value='0' >Block</option>
<option value='1' selected>Allow</option>
</select>
</td>
</tr>
<tr>
<td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td>
</tr>
<tr>
<td colspan='4' align='right'>
<input type='button' name='25' value='Apply' onClick='submitForm(document.SiteFilterCfg,25,0,"","",0,"")' >
<input type='button' name='26' value='Cancel' onClick='submitForm(document.SiteFilterCfg,26,0,"","",0,"")' >
</td>
</tr>
</table>
<p>Some text. </p>
<table class='edittable' width='100%' cellspacing='0' cellpadding='0' border='0'>
<tr>
<td colspan='5' class='black'><img src='/images/spacer.gif' border='0' width='1' height='1' alt=''><br></td>
</tr>
<tr>
<td colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='3' alt=''><br></td>
</tr>
<tr>
<th align='left'>Web Site</th>
<th align='left'>Action</th>
<th align='left'>Redirect</th>
<th colspan='2'></th>
</tr>
<tr>
<td colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='3' alt=''><br></td>
</tr>
<tr>
<td colspan='5' class='black'><img src='/images/spacer.gif' border='0' width='1' height='1' alt=''><br></td>
</tr>
<tr>
<td class='evenrow' colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='10' alt=''><br></td>
</tr>
<tr>
<td class='evenrow' colspan='5' align='center'><i>No filter rules defined.</i></td>
</tr>
<tr>
<td class='evenrow' colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='10' alt=''><br></td>
</tr>
<tr>
<td colspan='5' class='black'><img src='/images/spacer.gif' border='0' width='1' height='1' alt=''><br></td>
</tr>
<tr>
<td class='oddrow' colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='3' alt=''><br></td>
</tr>
<tr>
<td class='oddrow'><input type='text' name='32' maxlength='80' onkeypress='return noenter(event)' style='width: 60 '></td>
<td class='oddrow'>
<select name='33' style='width: 60 '>
<option value='0' selected>Block</option>
<option value='1' >Allow</option>
<option value='2' >Redirect</option>
</select>
</td>
<td class='oddrow'><input type='text' name='34' maxlength='80' onkeypress='return noenter(event)' style='width: 60 '></td>
<td class='oddrow' colspan='2' align='right' valign='middle'><input type='button' name='19' value='Add' onClick='submitForm(document.SiteFilterCfg,19,1,"","",0,"")' ></td>
</tr>
<tr>
<td class='oddrow' colspan='5'><img src='/images/spacer.gif' border='0' width='1' height='3' alt=''><br></td>
</tr>
<tr>
<td colspan='5' class='black'><img src='/images/spacer.gif' border='0' width='1' height='1' alt=''><br></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<br>
<table cellspacing='0' cellpadding='0' width='100%'>
<tr>
<td width='40' valign='top'><img src='/images/bull__md.gif' alt=''></td>
<td valign='top'>
<span class='blocktitle'>Content Based Filtering</span><br>
<form name='ContentFilterCfg' action='/cgi/b/sfltr/content/cfg/' method='post'>
<table width='100%' class='datatable' cellspacing='0' cellpadding='0'>
<tr>
<td></td>
<td width='30px'></td>
<td width='220px'></td>
<td width='50px'></td>
</tr>
<tr>
<td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td>
</tr>
<tr>
<td width='170'>License Type:</td>
<td colspan='3'>None</td>
</tr>
<tr>
<td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td>
</tr>
<tr>
<td width='170'>License Expiration:</td>
<td colspan='3'>Unknown (server not yet contacted)</td>
</tr>
<tr>
<td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td>
</tr>
<tr>
<td width='170'>Use Content Based Filter:</td>
<td colspan='3'><input type='checkbox' name='30' value='1' ></td>
</tr>
<tr>
<td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td>
</tr>
<tr>
<td width='170'>Action for uncategorised sites:</td>
<td colspan='3'>
<select name='31' style='width: 270px'>
<option value='0' selected>Block</option>
<option value='1' >Allow</option>
</select>
</td>
</tr>
<tr>
<td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td>
</tr>
<tr>
<td></td>
<td></td>
<td valign='bottom' colspan='2'>Block all categorized websites</td>
</tr>
</table>
</form>
<tr>
<td height='7' colspan='4'><img src='/images/spacer.gif' width='1' height='7' border='0' alt=''></td>
</tr>
<tr>
<td colspan='4' align='right'>
<input type='button' name='10' value='Apply' onClick='submitForm(document.ContentFilterCfg,10,0,"","",0,"")' >
<input type='button' name='11' value='Cancel' onClick='submitForm(document.ContentFilterCfg,11,0,"","",0,"")' >
</td>
</tr>
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</BODY>
</HTML>
我想删除<span class='blocktitle'>Content Based Filtering</span> 之后的“第二个”表。在函数中，我不是在做remove()，而是把它涂成黄色。好像整个页面都是黄色的...
我的感觉是“this”不在正确的范围内。
知道如何获得最内层的表，并且只是那个表，而不是在所有包含的表上都匹配？
编辑：
感谢 Clav，我在文档准备功能中找到了一种方法。现在，我正在尝试让“submitForm”更聪明，并刷新 div 而不是重新加载页面。
我以为我只需复制粘贴代码即可使其工作，但它并没有直接工作......
这里摘录了一些可在文档中使用的代码：
$(document).ready(function()
content.load('/AJAX/test/cfg_3.html div .contentitem', function(content)
$(this).find('tbody').each(function()
$("span:contains('Content Based Filtering')").parent("td < tr < tbody < table").css("background-color", "yellow");
);
document.getElementById("restart").style.display = "none";
document.getElementById("ready").style.display = "block";
);
);
但是如果我在提交表单中做同样的事情（我使用 Ajax 提交）：
(function()
//
var proxied = submitForm;
submitForm = function(theForm, actionNo, flags, primkey, confirmMsg, anchor, eval_code, customP)
$.ajax(
url: "/AJAX/test/cfg_3.html",
// for test I do a get
datatype: "html"
)
.done(function (html)
$(html).find('td').each(function()
$("span:contains('Content Based Filtering')").parent("td").parent("tr").parent("tbody").parent("table").css("background-color", "yellow");
);
content.html(html);
)
.fail(function (html)
window.location.reload();
);
return false;
)();
它不起作用。
我的理解是因为cfg3.html的源代码不包含<tbody>标签。所以我在占位符中更改并加载了 html，然后对其进行了修改（我放弃尝试另一个层次结构，因为它失败了）：
(function()
//
var proxied = submitForm;
submitForm = function(theForm, actionNo, flags, primkey, confirmMsg, anchor, eval_code, customP)
$.ajax(
url: "/AJAX/test/cfg_3.html",
// for test I do a get
datatype: "html"
)
.done(function (html)
content.html(html);
content.find('tbody').each(function()
$("span:contains('Content Based Filtering')").parent("td").parent("tr").parent("tbody").parent("table").css("background-color", "yellow");
);
)
.fail(function (html)
window.location.reload();
);
return false;
)();
我的问题是这在 Firefox 中有效，但在 IE 中无效...我不明白为什么，因为基本上我在 submitForm 中所做的与在 document.ready 中所做的相同。
有什么想法吗？
【问题讨论】：
【参考方案1】：您将表格单元格着色为黄色的代码正在循环遍历文档上的所有表格主体，并且该循环中的行选择器不限于任何特定表格，
所以实际上，对于页面上的每个表格，您都会对文档中的每个表格行进行一次迭代。如果我对您的理解正确，并且您想在包含文本“基于内容的过滤”的span 之后立即在form 中获得table 和datatable 类，您应该可以这样做：
$("span:contains('Content Based Filtering')").next("form").children("table.datatable").css("background-color", "yellow");
【讨论】：
不幸的是，这种关系似乎并不那么容易......我发现这是有效的，虽然不是很好恕我直言：'$("span:contains('Content Based Filtering')") .parent("td 你能在父表上放一个类吗？ 很遗憾没有。我目前在我的 PC 上进行测试，但这实际上是在旧版 SW（CGI 生成的页面）之上构建一个新界面。 我的错...上面的代码（以前的评论）不起作用。有效的是： $("span:contains('基于内容的过滤')").parent("td").parent("tr").parent("tbody").parent("table")... 我最终是如何做到的：' content.find('table').each(function() //var test345 = $("span:contains('基于内容的过滤' )").closest("table"); $("span:contains('基于内容的过滤')").closest("table").remove(); // Filtragem com base em conteúdo $("span: contains('Filtragem com base em conte')").closest("table").remove(); $(document).find("#restart").css("display","none"); // alert(test345); content.css("display", "block"); ); '以上是关于嵌套表，删除包含模式的内表的主要内容，如果未能解决你的问题，请参考以下文章