Javascript 是否根据表td输入更改标签？

首先让我解释一下我为什么需要这样做，这样才有意义。页面上有各种章节的标签/标题。用户可能希望将这些标题命名为其他名称或使用不同的语言。用“色调”代替“颜色”。有一个表格，其中包含标签信息和部分信息。所以，“颜色”和“红色”等等

我需要的是当用户更改表中的标签输入字段并单击“保存”-以更改页面上的相应标签时。在表中，第一列是匹配标签的id，也是相应输入的类

jQuery

// dynamically give table text inputs, with correct label classes
var valueCol = $("table#ruleTable tr td:nth-child(2)");
valueCol.html(function(){
    return '<input value="' + $(this).text() + '" class="' + $(this).prev().text() + '" />';
});

// save new label text
$('.saveLbl').click(function () {
    // for each input that was changed, find the corresponding label(s) and change the label text
    // the input .class matches the label #id
});

//使用正确的标签类动态提供表文本输入
var valueCol=$（“表#规则表tr td:n子项（2）”）；
html（函数（）{
返回“”；
});
//保存新标签文本
$（'.saveLbl'）。单击（函数（）{
//对于更改的每个输入，找到相应的标签并更改标签文本
//input.class与标签#id匹配
});

HTML

<label id="lblcolor">Colors</label>
<ul>
    <li>Red</li>
    <li>Blue</li>
    <li>Yellow</li>
</ul>    

<label id="lblshape">Shapes</label>
<ul>
    <li>Square</li>
    <li>Circle</li>
    <li>Rectangle</li>
</ul> 
<br /><br />
<table id="ruleTable" border='1' cellpadding='15'>
    <thead>
        <tr>
            <th>Label</th>
            <th>Display Value</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>lblcolor</td>
            <td>Colors</td>
            <td>ENG</td>
        </tr>
        <tr>
            <td>lblshape</td>
            <td>Shapes</td>
            <td>ENG</td>
        </tr>
    </tbody>        
</table>
<br /><br />
<button class='saveLbl'>Save</button>

颜色

红色的
蓝色的
黄色的

形状

方格
圈
长方形




标签
显示值
语言
lblcolor
颜色
英格
LBL形状
形状
英格



拯救

尝试以下代码：（）

$（'.saveLbl'）。单击（函数（）{
//对于更改的每个输入，找到相应的标签并更改标签文本
//input.class与标签#id匹配
变量行=$（“#规则表tbody”）.children（）；
对于（VarI=0；iBeautiful）。非常感谢。
 $('.saveLbl').click(function () {
    // for each input that was changed, find the corresponding label and change the label text
    // the input .class matches the label #id
    var rows=$("#ruleTable tbody").children();
    for(var i=0;i<rows.length;i++){
        var rowKids = $(rows[i]).children();
        var labelClass=$(rowKids[0]).text();
        var value=$($(rowKids[1]).children()[0]).val(); // <--- rowKids[1] is the td , its first child is the input row 
        $("#"+labelClass).text(value);
    }
});