Question

我有一张带有这种模式的tr的表

<tr>
        <td width="37" align="left"></td>
        <td width="200" align="left">
            <input type="submit" name="s1" onclick="ChangeThis(this);" value="Update Color" id="s1" class="btn-blue">&nbsp; &nbsp;
            <input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
        </td>
        <td width="340" align="center">
            <input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
        </td>
        <td class="hide"></td>
</tr>

我想要做的是点击此按钮，它将具有与输入示例按钮相同的序列按钮id = s1 input id = info1 我想改变背景颜色。我更喜欢jquery或javascript很好。我开始考虑正则表达式.. ^ ..

function ChangeThis(x) {
   $(this).closest('td').find('input[type="text"]').css('backgroundColor', 'Yellow');
}

那不起作用，我试过tr而不是td

UPDATE /修改

所以基本上我想要的是当单击按钮时，文本中有预定义的内容要更改

字体颜色
大胆与否
背景颜色

Answer 1

<强>更新

好的，我想我明白你的喜好。如果这个小提琴解决了它，请告诉我：

https://jsfiddle.net/14ymd0pd/

根据您的描述，我对您的喜好感到有些困惑。

我已经创建了一个JSFiddle，我认为它是预期的功能。

https://jsfiddle.net/tvu08yrm/

主要区别在于使用jQuery on事件处理程序分离出JavaScript：

$('.color-btn').on('click', function(){

添加一个新类（color-btn），以便可以定位按钮并更改三元组DOM元素的功能。

几点说明：

您不应该使用内联JavaScript。我在小提琴中分离出了JavaScript。
由于我只能看到一小段代码，我很难说，但如果该页面不显示表格数据，则不要在表格中显示...使用div或ul或其他相关元素，而不是表格。
我还没有在我的小提琴中完成它，但是你也应该将内联css从标记移到外部css文件中。
JavaScript依赖于表的结构，如果更改其结构，您还需要更新jQuery选择器。这可以通过遵循表行中的命名约定并使用这些约定来定位适当的元素而不是它们的相对位置来避免。

让我知道小提琴是否回答了你的问题：）

Answer 2

有许多解决方案可以让您的代码正常运行。

第一个解决方案：在函数

中使用x而不是this

pro：代码工作
contra：编码风格不好，你不应该使用内联javascript。

第二个解决方案：将onclick="changeThis(this)"更改为onclick="changeThis.call(this)"

pro：代码有效，你可以在函数上下文中使用它
contra：你在函数上下文中使用它...只有少数几种情况可以做到。这不是这种情况。再次：inline-javascript

第三种解决方案：不要使用onclick。

<tr>
        <td width="37" align="left"></td>
        <td width="200" align="left">
            <input type="submit" name="s1" value="Update Color" id="s1" class="btn-blue">&nbsp; &nbsp;
            <input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
        </td>
        <td width="340" align="center">
            <input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
        </td>
        <td class="hide"></td>
</tr>

$('input:submit[name="s1"]/* or a different selector... depends on your logic */').click(changeThis);

你应该使用第三个。

更新td标记

2 个答案: