javascript - 动态表 onchange 和 td id

标签 javascript jquery

我创建了一个动态表，想知道如何将新 ID 添加到每个选择行，以便在执行 onchange 事件时可以从中进行计算。

我已经添加了一个变量，它应该为每个变量提供一个唯一的值，但我不知道如何检查。

基本上，当前为空的列(需要的点数)将是价格列 * 想要的列(下拉菜单)的结果。

https://jsfiddle.net/wayneker/u0y4s3ku/10/ 

$(document).ready(function () {
    arrayData();
});

function arrayData() {
    var index;
    var text = "<ul>";
    var htmlTable = '';
    var raidCalcTable = [];
    raidCalcTable = [{
        printName: "Jack",
        printPrice: 1111,
        quantityAllowed: 1,
    }, {
        printName: "John",
        printPrice: 2222,
        quantityAllowed: 2,
    }, {
        printName: "Jill",
        printPrice: 3333,
        quantityAllowed: 3,
    }];

    for (index = 0; index < raidCalcTable.length; index++) {

        var id = "id=\"print" + (index+1) + "want\""; 
        var onchange = " onchange=\"mychange()\"";

        $("#tbNames tr:last").after("<tr>   <td>" +
        raidCalcTable[index].printName + "</td> <td>" + 
        raidCalcTable[index].printPrice   + "</td> <td>" + 
        raidCalcTable[index].quantityAllowed + 
        "</td><td><select " + id + onchange + "><option value= 0 >0</option><option value= 1 >1</option><option value= 2 >2</option></select></td>   </tr>");
    }//end of loop

}

最佳答案

我想你想要这样:-

1.需要转换id至 class如下所示:-

var myclass = 'class="printwant"';

2.给价格栏添加类<td>如下所示:-

<td class='myprice'>

3.像这样使用事件委托(delegate):-

$('#tbNames').on('change','.printwant',function(){

$(this).parent().parent('tr').find('td:last').html($(this).parent().parent('tr').find('.myprice').html() * $(this).val());
});

工作示例(基于您的代码):-

$(document).ready(function () {
    arrayData();
});

function arrayData() {
    var index;
    var text = "<ul>";
    var htmlTable = '';
    var raidCalcTable = [];
    raidCalcTable = [{
        printName: "Jack",
        printPrice: 1111,
        quantityAllowed: 1,
    }, {
        printName: "John",
        printPrice: 2222,
        quantityAllowed: 2,
    }, {
        printName: "Jill",
        printPrice: 3333,
        quantityAllowed: 3,
    }];

    for (index = 0; index < raidCalcTable.length; index++) {
    
        var myclass = 'class="printwant"'; 

        $("#tbNames tr:last").after("<tr>   <td>" +
        raidCalcTable[index].printName + "</td> <td class='myprice'>" + 
        raidCalcTable[index].printPrice   + "</td> <td>" + 
        raidCalcTable[index].quantityAllowed + 
        "</td><td><select " + myclass + "><option value= 0 >0</option><option value= 1 >1</option><option value= 2 >2</option></select></td><td></td>   </tr>");
    }//end of loop
    
}

$('#tbNames').on('change','.printwant',function(){

$(this).parent().parent('tr').find('td:last').html($(this).parent().parent('tr').find('.myprice').html() * $(this).val());
});
#myBtn{
   // background:#8595d0;  
    width:100px;
    border-radius:25px;
    min-height:20px;
    display: block;
    margin: auto;
}
input[type=number]{
    width:40px;
    padding:3px;
    margin:0;
    border:1px solid #ddd;
    border-radius:5px;
    text-align:center;
}
.textbottom { 
  vertical-align: bottom; 
 }
 .texttop { 
  vertical-align: top; 
 }
 
.topleft {
  position:absolute; 
  z-index: 100; 
  width: 100px; 
  height: 80px; 
  top: 0px;
  background:url(http://www.ahoymearty.co.uk/basebubble/images/border.png) top left; 
  display: block;
}
.topright {
  position:absolute; 
  z-index: 100; 
  width: 100px; 
  height: 80px; 
  top: 0px; 
  right: 0;
  background:url(http://www.ahoymearty.co.uk/basebubble/images/border.png) top right; 
  display: block;  
}
.bottomleft{
  position:absolute;
  z-index: 100; 
  width: 100px; 
  height: 80px; 
  bottom: 0px; 
  left: 0;
  background:url(http://www.ahoymearty.co.uk/basebubble/images/border.png) bottom left; 
  display: block;
}
.bottomright{
  position:absolute; 
  z-index: 100; 
  width: 100px; 
  height: 80px; 
  bottom: 0px; 
  right: 0;
  background:url(http://www.ahoymearty.co.uk/basebubble/images/border.png) bottom right; 
  display: block;
}
.top{
  position: absolute;
  z-index: 99;
  background-image: url(http://www.ahoymearty.co.uk/basebubble/images/borderbottomtop.png);
  background-repeat: repeat-x;
  top: 2px;
  left: 0px;
  height: 14px;
  width:100%;
}
.bottom{
  position: absolute;
  z-index: 99;
  background-image: url(http://www.ahoymearty.co.uk/basebubble/images/borderbottomtop.png);
  background-repeat: repeat-x;
  background-position: bottom;
  bottom: 1px;
  left: 0px;
  height: 16px;
  width:100%;
}
.left{
  position: absolute;
  z-index: 99;
  background-image: url(http://www.ahoymearty.co.uk/basebubble/images/bordersides.png);
  background-repeat: repeat-y;
  top: 0px;
  left: 0px;
  height: 100%;
  width:16px;
}
.right{
  position: absolute;
  z-index: 99;
  background-image: url(http://www.ahoymearty.co.uk/basebubble/images/bordersides.png);
  background-position: right;
  background-repeat: repeat-y;
  top: 0px;
  right: 0px;
  height: 100%;
  width:16px;
}
div.a { 
	position: absolute;
	top: 37px;
    left: 10px;
	}
div.b {
    position: fixed;
    top: 37px;
    left: 220px;
}
div.c {
	position: relative;
    top: 28px;
    left: 400px;
	
}
header {
	position: absolute;
    top: 0px;
    width: 100%;
    z-index: 150;
    height: 35px;
    background-image: url("http://www.ahoymearty.co.uk/shipyard/fluff/cs/splash-bg.jpg");
    margin-left: -8px;
    border-bottom-color: #000;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    color: #fff;
}

header ul li a {
    color: #fff !important;
}

header h1 {
    position: absolute;
    top: -9px;
    font-size: 20px;
    font-weight: bolder;
    left: 58%;
    margin-left: -101px;
}

header ul li {
    padding-left: 15px;
    display: inline;
    list-style-type: none;
    float: left;
}

header ul {
    margin-top: 8px;
}

#fb {
    position: absolute !important;
    top: 7px;
    right: 50px;
    background-color: inherit;

}

body{
    background-image: url("http://www.ahoymearty.co.uk/css/background.jpg");
		background-repeat: no-repeat;
		background-attachment: fixed;
}


input[type=checkbox]{padding:0; margin:0;}

td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 2px 10px;
}


.blink_me {
    padding: 2px;
    
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: steps(1, start);
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: steps(1, start);
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: steps(1, start);
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { background-color: none; }
    50% { background-color: red }
    100% { background-color: none; }
}

@-webkit-keyframes blinker {  
    0% { background-color: none; }
    50% { background-color: red }
    100% { background-color: none; }
}

@keyframes blinker {  
    0% { background-color: none; }
    50% { background-color: red }
    100% { background-color: none; }
}

.container {
    position:relative;
    width:225px;
    height:52px;
    padding:20px 10px 0;
    margin:100px auto 10px;
    text-align:center;
    background:rgba(255, 255, 255, 0.7);
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
}

.uibutton {
    display:inline-block;
    padding:5px 10px;
    border-top:1px solid #96d1f8;
    color:#fff;
    border-radius:8px;
    box-shadow:rgba(0,0,0,1) 0 1px 0;
    text-shadow:rgba(0,0,0,.4) 0 1px 0;
    text-decoration:none;
    background:#65a9d7;
    background-repeat:no-repeat;
    background-image:-webkit-linear-gradient(
        top left,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 37%,
        rgba(255, 255, 255, 0.8) 45%,
        rgba(255, 255, 255, 0.0) 50%
    ),
    -webkit-linear-gradient(
        #3e779d, #65a9d7
    );
    background-image:-moz-linear-gradient(
        0 0,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 37%,
        rgba(255, 255, 255, 0.8) 45%,
        rgba(255, 255, 255, 0.0) 50%
    ),
    -moz-linear-gradient(
        #3e779d, #65a9d7
    );    
    background-image:-o-linear-gradient(
        0 0,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 37%,
        rgba(255, 255, 255, 0.8) 45%,
        rgba(255, 255, 255, 0.0) 50%
    ),
    -o-linear-gradient(
        #3e779d, #65a9d7
    );
    background-image:linear-gradient(
        0 0,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.2) 37%,
        rgba(255, 255, 255, 0.8) 45%,
        rgba(255, 255, 255, 0.0) 50%
    ),
    linear-gradient(
        #3e779d, #65a9d7
    );
    background-position:-100px -100px, 0 0;
    -moz-background-size:250% 250%, 100% 100%;
         background-size:250% 250%, 100% 100%;
    -webkit-transition:background-position 0s ease;
       -moz-transition:background-position 0s ease;       
         -o-transition:background-position 0s ease;
            transition:background-position 0s ease;
}

.headerrow:hover,
.headerrow:focus {
    color:#e60000;
    background-position:0 0, 0 0;
    -webkit-transition-duration:0.5s;
       -moz-transition-duration:0.5s;
            transition-duration:0.5s;
}

.headerrow:active {
    top:1px; 
}/* CSS Document */

#buttonhelp {
    background: url(http://www.ahoymearty.co.uk/basebubble/images/help.png) 3px 5px no-repeat;
    left:620px;
    top: 30px;
    position:relative;
    width:10px;
    height:30px;
    line-height:27px;
    display:block;
    color: #000;
    padding: 2px 10px;
}
#hover {
    background: none repeat scroll 0 0 #ddd;
    border: 0px solid #DADADA;
    color: #333333;
    width:300px;
    height: 0;
    overflow:hidden;
    left: 5px;
    line-height: 20px;
    position: absolute;
    top: 30px;
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease;
}
#buttonhelp:hover > #hover {
    display:block;
    height:350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbNames">
    <tr>
        <th width="150">NAME</th>
        <th width="150">PRICE</th>
        <th width="75">Total Allowed</th>
        <th width="150">Total Wanted</th>
        <th width="150">Points Needed</th>
    </tr>
</table>

关于javascript - 动态表 onchange 和 td id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43535905/

上一篇：javascript - 使用 javascript 检索 <noscript> 标签数据

下一篇：javascript - 链接 promise 链

相关文章：

javascript - 通过单击函数获取按钮的 id

javascript - 如何将 Ext JS 用于基于角色的应用程序

javascript - 当对 Node.js 使用 child_process.exec 时，为什么输出来自 STDERR 而不是 STDOUT？

javascript - flex 元素是否有可能与它们上方的元素紧密对齐？

javascript - 获取位置 :relative to work in IE9

jquery - 允许出现在任何地方的 HTML5 元素

javascript - 使用 IMG SRC 作为链接 REF 将 LINK 动态添加到 IMG 标签

javascript - 将回调函数结果附加到特定的 div/位置？

javascript - jquery load() 的 margin 问题

javascript - 如何: redactor. js imageUpload Post Extra参数

©2024 IT工具网  联系我们