文本框和图片的关系答案

【问题标题】：Relationship between the textbox and image文本框和图片的关系
【发布时间】：2011-05-21 16:59:44
【问题描述】：

嘿， ASP.NET 专业人士的简单问题：我连续有几个动态生成的文本框。在这一行中还有一个带有事件处理程序“onclick”的图像。我将创建文本框和图像之间的关系。我单击图像，选择一个值，然后将填充文本框。

目前我的控件具有以下动态生成的 ID：

按钮：

ct100_cph_Detail_rpFields_ct109_rpCell_ct100_cbf_bed1_item_sym

文本框

ct100_cph_Detail_rpFields_ct109_rpCell_ct100_tb_bed1

这两个控件必须有关系。对我来说最好的解决方案是使用 JavaScript，因为我没有太多 ASP.NET 技能..

感谢您的帮助！ :-)

【问题讨论】：

你是在使用纯 JavaScript，还是在使用 JQuery 之类的库？
我可以同时使用，但是我没有 jQuery 的技能。目前纯 JavaScript

标签： javascript asp.net

【解决方案1】：

如果生成的 ID 始终遵循此方案，您可以通过获取按钮/图像的 ID 来访问文本框，并将此 ID (_cbf_bed1_item_sym) 中的非唯一部分替换为文本框的非唯一部分-身份证（_tb_bed1）

例子：

<input type="button"  value="click" 
   id="ct100_cph_Detail_rpFields_ct109_rpCell_ct100_cbf_bed1_item_sym" 
   onclick="document.getElementById(this.id.replace(/_cbf_bed1_item_sym$/,'_tb_bed1')).value='gotcha'"/>

<input type="text" 
   id="ct100_cph_Detail_rpFields_ct109_rpCell_ct100_tb_bed1"/>

可能还有其他方法，但要说明它们，您必须显示此类行的标记（需要查看这些元素与它们在文档树中的位置的关系）

【讨论】：

【解决方案2】：

“关系”是它们都在同一行。

服务器端：

TableRow.Attributes.Add("onclick", "rowClick(event);")

客户端：

function rowClick(e) {
    e = e || event;
    var target, img, textbox, row;
    target = e.target || e.srcElement;
    if (target.tagName == 'IMG') {
        img = target;
        while(target.tagName != 'TR') {
            target = target.parentNode;
        }
        row = target;
        textbox = row.getElementsByTagName('input')[0];
        textbox.value = img.src;
    }
}

【讨论】：