导航:首页 > 编程语言 > js改变table某一行下拉框选中值

js改变table某一行下拉框选中值

发布时间:2024-06-10 10:15:20

A. 如何用js实现下拉框中selected

思路:设置下拉框的value属性,那么下拉框的option选项中相应value值选项就会被选中。

下面实例演示——根据文本框值设置下拉框选中项:

1、HTML结构

<selectid="test">
<optionvalue="0">--pleaseselect--</option>
<optionvalue="1">option-1</option>
<optionvalue="2">option-2</option>
<optionvalue="3">option-3</option>
</select><br>
<inputtype="text"id="val"><inputtype="button"value="设置"onclick="fun()">

2、javascript代码

functionfun(){
varval=document.getElementById("val").value;
document.getElementById("test").value=val;
}

3、效果演示

B. 使用JS实现table里面td内容的更改

1、首先根据图示全部代码新建html文件

C. HTML+js如何让下拉框选中默认值

使用
var d=new Date()
m = d.getMonth()
获取当前月份
然后使用jq的val来设置一下下拉框的值

D. 用javascript怎么取下拉列表的值

对于单选下拉列表,value属性可以直接获取其选中项的value值。

下面实例演示——单击按钮获取下拉列表选中项的value值:

1、HTML结构

<selectid="test">
<optionvalue="1">option-1</option>
<optionvalue="2">option-2</option>
<optionvalue="3">option-3</option>
<optionvalue="4">option-4</option>
</select><br>
<inputtype='button'value='获取选中项'onClick="fun()"/>

2、javascript代码

functionfun(){
obj=document.getElementById("test");
alert(obj.value);
}

3、效果演示

E. javascript中如何获得TABLE中某一行指定列的值,并触发一个事件,修改该行另外一列的值

<input type="text" name="COUNT" value="" itemdesc="数量" onchange=getTotalPrice(this)/>

注意到您的count为text,不太适合使用onchange来触发,这会带来问题。
比如:你的原数量为20,当你想修改为15时,你会:
1、删除20 值变为“”,onchange触发
2、输入1 值变为 1, onchange触发
3、输入5 值变为 15, onchange触发

这样会触发三次,不能满足你触发一次的要求。
应该用onblur来触发。

分析你的业务,你需要计算当前行的,这样可以使用DOM的API来实现
<table border=1>
<tr>
<td>
<input type="text" value="12" onblur="getTotalPrice(this)">
</td>
<td><input type="text" value="13" onblur="getTotalPrice(this)"></td>
<td>
<input type="text" value="25">
</td>
</tr>
<tr>
<td>
<input type="text" value="1" onblur="getTotalPrice(this)">
</td>
<td><input type="text" value="2" onblur="getTotalPrice(this)"></td>
<td>
<input type="text" value="3">
</td>
</tr>

</table>

<script type="text/javascript">
function getTotalPrice(obj){
var c1 = obj.parentNode.parentNode.childNodes[0].childNodes[0].value;
var c2 = obj.parentNode.parentNode.childNodes[1].childNodes[0].value;
obj.parentNode.parentNode.childNodes[2].childNodes[0].value = parseInt(c1) * parseInt(c2);
}
</script>

修改前面两个栏,都会自动修改第三栏

相信合你意思,加分吧
//var items = document.getElementsByTagName("input");
<!-- 楼上牛人:1、指定下标?2、onkeydown -->

//楼主,这还繁?那加分吧,加分定制一个给你

F. js中table的关于选中某一行的问题

<body>
<inputtype="radio"name="qwe"checked="checked">1
<inputtype="radio"name="qwe">2
<inputtype="radio"name="qwe">3
<inputtype="radio"name="qwe">4
<inputtype="radio"name="qwe">5
<inputtype="radio"name="qwe">6
<buttononclick="next()">下一个</button>
</body>
<script>
//这么写是不用管页面的html代码结构,如果你页面有别的不相关的radio,可以说下你的页面结构我调整一下代码
functionnext(){
$("[type=radio]").each(function(index,el){
if($(el).attr("checked")=="checked"){
//判断是否最后一个
if($("[type=radio]").length==index+1){
returnfalse;
}
$(el).removeAttr("checked");
$("[type=radio]").eq(index+1).attr("checked","checked");
returnfalse;
}
});
}
</script>

G. 鐐瑰嚮琛ㄦ牸鍐呬竴琛,jquery鑾峰緱姝よ岀涓涓鐨刬nput鐨剉alue

$("#table tr").click(
$(this).child("td:eq(0)")//浣犺瘯璇曡繖涓銆
each($(this).find("td"),function(){if($(this).index()==0){alert("鎴戞槸杩欒岄噷闈㈢涓涓猼d");}})//涓や釜鎵剧涓涓猼d
鎵惧埌td鍚庯紝
$td.find(":check")//鑾峰彇td涓璫heck绌洪棿銆
$td.find(":check").attr("checked",true);//璁剧疆涓簍rue锛屽傛灉涓嶅ソ浣匡紝灏辫剧疆鎴
attr("checked","checked");
);

H. 只用js如何实现表格内容的动态修改

<body>

<tableid='test'>//定义一个table

<tr>

<td></td><td></td>

</tr>

</table>

<script>

vartb=document.getElementById('test');//获取表格的dom节点

vartd=tb.rows[0].cells[0];//获取0行0列的td单元格

td.innerHTML='222';//动态修改表格的内容为222

</script>

</body>

思路:

1、获取表格的dom节点

2、通过rows和cells定位td单元格

3、通过修改innerHTML

(8)js改变table某一行下拉框选中值扩展阅读:

JS实现动态表格的新增,修改,删除操作

一、相关JS函数

function setParamslist() {

var tab = document.getElementById("tab");

//表格行数

var rows = tab.rows.length ;

//表格列数

var cells = tab.rows.item(0).cells.length ;

//alert("行数"+rows+"列数"+cells);

var rowData = "";

for(var i=1;i<rows;i++) {

var cellsData = new Array();

for(var j=0;j<cells-1;j++) {

cellsData.push(tab.rows[i].cells[j].innerText);

}

rowData = rowData + "|" + cellsData;

}

document.getElementById("paramslist").value = rowData;

}

//打开相关新增应用参数界面

function openAppParamsPage() {

var param = new Object();

//这个参数一定要传。

param.win = window;

param.id = 100;

param.name = "test";

param.birthday = new Date();

var result = window.showModalDialog("addParamsItem","dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=200px");

//var temp = document.getElementById("paramslist").value;

//document.getElementById("paramslist").value = temp + result;

addSort(result);

}

// 增加应用参数函数

function addSort(data) {

var name = data;

if(name == ""||name==undefined ) {

return;

}

console.log(data);

var params = data.split(",");

var paramName = params[0];

var paramCode = params[1];

var paramValue = params[2];

var row = document.createElement("tr");

row.setAttribute("id", paramCode);

var cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramName));

row.appendChild(cell);

cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramCode));

row.appendChild(cell);

cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramValue));

row.appendChild(cell);

var deleteButton = document.createElement("input");

deleteButton.setAttribute("type", "button");

deleteButton.setAttribute("value", "删除");

deleteButton.onclick = function () { deleteSort(paramCode); };

cell = document.createElement("td");

cell.appendChild(deleteButton);

row.appendChild(cell);

document.getElementById("sortList").appendChild(row);

}

// 删除应用参数函数

function deleteSort(id) {

if (id!=null){

var rowToDelete = document.getElementById(id);

var sortList = document.getElementById("sortList");

sortList.removeChild(rowToDelete);

}

}

二、弹出框页面,新增或者修改参数,并回写相关数据。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>新增应用</title>

<#include "/views/head.html"/>

</head>

<body>

<div class="body-box">

<div class="clear"></div>

<form >

<table width="100%" cellspacing="1" cellpadding="2" border="0" class="pn-ftable">

<tr>

<td>参数名称:</td>

<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramName" name="paramName"/></td>

</tr>

<tr>

<td>参数编码:</td>

<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramCode" name="paramCode" required="true" /></td>

</tr>

<tr>

<td>参数值:</td>

<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramValue" name="paramValue" required="true" /></td>

</tr>

<tr>

<td align="center" colspan="4">

<input type="submit" value="保存" onclick="returnResult();"/>

<input type="button" value="返回" onclick="closeWindow();"/>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

<script type="text/javascript">

//直接关闭窗口

function closeWindow() {

window.close();

}

//获取值,组装后返回

function returnResult() {

if(!$('form').valid())

return;

var paramName = document.getElementById("paramName");

var paramCode = document.getElementById("paramCode");

var paramValue = document.getElementById("paramValue");

//alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value);

var result = paramName.value + "," + paramCode.value + "," + paramValue.value;

window.returnValue = result;

window.close();

}

</script>

阅读全文

与js改变table某一行下拉框选中值相关的资料

热点内容
今日头条安卓21 浏览:464
电脑店u盘启动盘制作工具v61 浏览:766
9月19订的苹果6splus 浏览:270
网络人绿色版 浏览:450
linux服务器启动oracle 浏览:621
win10怎么语音呼唤小娜 浏览:456
qq飞车银天使 浏览:612
骑车赚钱app 浏览:111
怎么从电脑上下编程 浏览:508
linux如何复制到其他文件夹 浏览:70
碧蓝航线文件找不到怎么办 浏览:937
苹果备份的文件夹怎么恢复 浏览:941
看小黄APP有哪些 浏览:206
怎样在手机看264文件 浏览:80
常熟有哪里学编程的 浏览:162
我的下载的文件在哪里 浏览:563
文本显示器编程教程 浏览:942
电脑应用如何设置密码 浏览:336
怎么编程搜狗指南 浏览:155
代聊微信号 浏览:623

友情链接