8

我可以使用 Javascript 重命名表单的字段吗？比如改变：

<input type="text" name="chicken" id="chicken"/>

至

<input type="text" name="horse" id="horse"/>
4

5 回答 5

12

当然有可能：

var field = document.getElementById("chicken");
field.id = "horse";  // using element properties
field.setAttribute("name", "horse");  // using .setAttribute() method
于 2013-05-13T11:39:31.010 回答
9

您可以更改name属性，但在我看来，您不应该更改id.

您可以使用 ：

document.getElementById("chicken").setAttribute('name', 'horse');

编辑

以下陈述纯粹是主观的，可能没有关于 SO 的空间。

来自W3.org：

id 属性在 HTML 中有几个角色：

  • 作为样式表选择器。
  • 作为超文本链接的目标锚。
  • 作为从脚本中引用特定元素的一种方式。
  • 作为声明的 OBJECT 元素的名称。
  • 用于用户代理的通用处理（例如，在从 HTML 页面提取数据到数据库时识别字段，
    将 HTML 文档转换为其他格式等）

正如我所看到的，ID 是一个唯一标识符，对于从脚本中检索元素（除其他外）非常有用，我个人希望能够使用相同的选择器检索这个单个元素，无论它在运行时所承受的任何操作. 所以，我不会改变它。

示例：如果我将一只鸡变成一匹马，我会记住它以前曾经是一只鸡，我宁愿记住它是一个我将选择的突变体，并使用其他 CSS将$('#chicken[name=horse]')它伪装成马选择器。

于 2013-05-13T11:40:20.747 回答
4

是的，可以在运行时使用 js 更改任何数据 :)

var elementToRename = document.getElementById("chicken");
elementToRename.id = "horse"; 
elementToRename.setAttribute("name","horse"); = "horse";
于 2013-05-13T11:47:31.933 回答
2

一旦您可以访问元素对象（即使用getElementById），您就可以更改其name属性：

el.name = 'horse';

该属性将反映属性的值。

于 2013-05-13T11:42:17.073 回答
-1

如何在 JavaScript 中重命名选项卡。下面是代码。

var i=parseInt(1);
        var clickid;
       $(document).ready(function(){
       	$("#demoTabs").tabs();
        $(".nav-tabs").on("click", "a", function(e){
        e.preventDefault();
      // $(this).tabs("show");
    })
    .on("click", ".close", function () {
    	var w_demo=$('#demoTabs').outerWidth();
        $(this).parent().remove();
        $("#demoTabs").width((w_demo-105)+"px");
	});
    $('.add-tab').click(function(e) {
        e.preventDefault();
        var html="<li class=\"tabs\" id="+i+"><a href=\"#\">New Tab</a><span class=\"close\">x</span></li>";
        $(this).closest('li').before(html);
		var w=$("#demoTabs").outerWidth();	
        var w=w+95;
        document.getElementById('demoTabs').style.width=w+"px";
        i=i+1;
	});
    if (document.getElementById('demoTabs').addEventListener) {
    document.getElementById('demoTabs').addEventListener('contextmenu', function(e) {
            $("#rmenu").toggleClass("hide");
            $("#rmenu").css(
              {
                position: "absolute",
                top: e.pageY,
                left: e.pageX
              }
            );
            e.preventDefault();
            clickid=$(this).id;
            prompt(this+" "+clickid);
     }, false);
}

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});
$("#refresh").click(function(){
    location.reload();
})
$("#rename").click(function(e){
var reply=prompt("type in a name for tab");
if(reply!=null && reply.trim().length>0)
{
     // $(e.target).prev("tabs").text(reply);
       // prompt(clickid);
      document.getElementByClass("").innerHTML=reply;
}
});
     });
   #body{
  height:22.8px;
  width:32.4px;
}
#demoTabs{ 
	width:90px;
    overflow: auto;
}
.nav-tabs > li > span {
    float:right;
    cursor:pointer;
    position:absolute;
    right: 6px;
    top: 8px;
    color: red;
}
.hide {
    display: none;
}

#rmenu {
  border: 1px solid black;
  background-color: white;
  cursor:pointer;
}

#rmenu ul {
  padding: 0;
  list-style: none;
  margin: 0;
}
#rmenu li{
    list-style: none; 
    padding-left: 5px; 
    padding-right: 5px; 
}
<body style="position:relative">
    <div id="demoTabs">
    <ul class="nav nav-tabs">
        <li class="tabs"><a href="#" class="add-tab">+Add</a></li>
    </ul></div>
    <div class="tab-content">
    </div>
    <div class="hide" id="rmenu">
        <ul>
            <li id="refresh">Refresh</li>
            <li id="rename">Rename</li>
        </ul>
    </div>

于 2018-06-15T08:18:49.963 回答