获得某进程的PID and kill it.
thinkpad 用中键滚动屏幕失效..

iframe. 子父页面互相操作

TLHL28 posted @ Tue, 29 Dec 2009 05:32:44 +0800 in 随笔 with tags javascript , 6875 readers

简单记录一下今天学到的东西。 jQuery相关。

summay:

 将子页面的数据处理后传到父页面;

条件:

子页面(iframe)有一列表。

父页面有一待填入数据的table,与子页面具有对应元素。

需求:

双击子页面的列表某一行。在父页面的添加一行数据,数据来自子页面列表,供修改。子页面行高亮提示。

在父页面加减行里删除某行,去掉子页面列表对应行的高亮。

(具体怎么删除添加行就不说了,不是自己的东西)

使用工具:

JsonUtil. jQuery

简单示例:

子页面js部分

 

jQuery(document).ready(function() {
    //假设所有 tr 都在 tbody标签内操作如下
    jQuery('table tbody>tr').dblclick(function() {
	var o = new Object();
	var $thistr = jQuery(this);
	$thistr.find('td').each(function() {
		//获取自己定义的tag属性 <td tag="hello">td的内容</td>
		var name = jQuery(this).attr('tag');
		//获取本td内容
		var tdValue = jQuery(this).text();
		o[name] = tdValue;
	});
	if(searchItemFromParent(o['accountNo']))
	    return;
	parent.dataObj; //暂时用此比较恶心的做法,父页面全局变量
	parent.addRaw(null);
	$thistr.addClass('light'); //自定义light样式,这里不写出来里的。就随便一个颜色
    });
});

//搜索是否已经添加到父页面中
function searchItemFromParent(accountNo) {
    var itemExist = false;
    jQuery('tbody > tr',window.parent.document).find('input[name*=accountNo]').each(function() {
	if(jQuery(this).val() == accountNo) {
	    itemExist = true;
	    return; // work?
	}
    });

    return itemExist;
}
父页面:

<html>
<!-- iframe -->
<script type="text/javascript">
function addRaw(arg) {
    //.....
}

//添加行后触发的事件,传入该tr对象
var dataObj;
function addRawEvent(newtr) {
       //...........
       //对某table添加行
       jQuery(newtr).find('input').each(function() {
	    var nameList = jQuery(this).attr('name').split('.');
	    //以'.'为风格符,转成数组,获得最后一个元素
	    //处理jsp中的这中情况 name="a.b[0].accountNo" 
	    var name = nameList[nameList.length - 1];
	    jQuery(this).val(dataObj[name]);
       });
}

//....删除事件

function removeRowEvent(removetr) {
    jQuery('table tbody>tr',window.iframes['infoIframe'].document).find('td[tag*=accountNo]').each(function() {
	if(jQuery(removeTr).find('input[name*=accountNo]').val() == jQuery(this).text()) {
	    jQuery(this).removeClass('light');
	}
    });
}
</script>
<!-- iframe -->
<iframe id="infoIframe" src="child.html" />
</html>

 

 


Login *


loading captcha image...
(type the code from the image)
or Ctrl+Enter