动态表onchange和td id

时间：2017-04-21 06:57:16

标签： javascript jquery

我已经创建了一个动态表，想知道如何在每个选择行中添加一个新的id，这样我就可以在进行onchange事件时从中进行计算。

我添加了一个var，它应该为每个值赋予一个唯一值，但我不知道如何检查。

基本上当前为空的列（需要的点）将是Price列*想要列（下拉菜单）的结果。

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

}

2 个答案:

答案 0 :(得分：1)

我想你想要这样： -

1.需要将id转换为class，如下所示： - 

var myclass = 'class="printwant"';

2.将类添加到价格列<td>，如下所示： - 

<td class='myprice'>

3.使用这样的事件委托： - 

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

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

工作示例（基于您的代码）： -

＆＃13;
＆＃13; 
$(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());
});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

如果您将频繁使用动态生成的内容，可能需要使用某些模板构建器，如http://handlebarsjs.com/。 关于你的问题的答案是绑定更改事件，用于选择和使用$(this)并使用像$(this).closest('tr).find('td.j-firstColumn)这样的树遍历。我还建议使用类作为选择器。

$(document).on('change', '.j-select', function(e) { var $firstCoumn = $(this).closest('tr).find('td.j-firstColumn); //do some action with $firstCoumn });

通过上面的构造，您无需在生成模板时随时生成新事件。

相关问题
最新问题