2014-07-02 35 views
0

我想添加一行到2单元格的表。 单元1:从输入字段中的文本 小区2:rateit星级ratting 这里是我的HTML:添加输入文本和rateit星星也jsfiddle javascript不工作

<div> 
<button type="button" id="cl" onclick="checkit()">Check I'm working</button> 
</div>  
<p><b> Please enter an item, rate it, and click <i>Add to Remedy</i>thanks</b></p> 
<div class="form-group"> 
     <div> 
    <label id="inp-title" class="control-label" for="formInput1">Field label</label> 
<input type="text" class="form-control" id="formInput1" placeholder="Placeholder text"> 
</input> 
     </div> 
     <div> 
       <div id="rateit_id" class="rrateit"></div> 
     </div><br><br> 
<button type="button" id="add-to-remedy" class="btn btn-default">Add to Remedy</button> 
<div> 
    <table class="table" id="remedy-tbl"> 
     <thead> 
      <tr> 
       <th>Remedy Item</th> 
       <th>Item Rating</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
</div> 

,这里是我的JQuery:

 $(document).ready(function() { 
    var rate-val= 0; 
$('div#rateit_id').rateit(); 
    function checkit(){ 
      alert("HELLO WORLD!"); 
        }; 

$("#rateit_id").click(function() { 
    rate-val = ($(this).rateit('value')); 
        });         

$("#add-to-remedy").click(function() 
    { 
    var htmlToAppend =       
'<tr><td>' + $('input[type=text].form-control').val() + '</td><td>' +    
'<div class="rateit" data-rateit-value="' + rate-val +  
'" data-rateit-ispreset="true" data-rateit-readonly="true"></div>' + '</td></tr>'; 
     $("#remedy-tbl").append (htmlToAppend);     
     newTableRow.appendTo("#remedy-tbl"); 
      }); 
    }); 

,这里是无法运作的http://jsfiddle.net/gZ9by/8/我理解的jsfiddle问题是JavaScript的不工作,但我不知道为什么。帮助这一点也将非常感激。 谢谢 大卫

+0

您不能在变量名中使用连字符。 JavaScript将其解释为减法。 – Jason

+0

什么是newTableRow应该是? – Jason

+0

到目前为止我已经修复了一大堆。您应该真的使用您的Web浏览器的开发人员控制台查看正在通过的错误。这里有一个小提示让你开始:http://jsfiddle.net/LimitedWard/br85r/2/。 – Jason

回答

0

我认为你的rateit函数有一个错误,这就是为什么之前的jQuery不工作,否则你的代码是好的。

0

确定 - 首先我改变了'rate-val'以不使用减号(无效的JavaScript变量)。我还修复了一些JavaScript错误。

在将项目添加到表格的部分中,实际上并没有将rateval变量放入div中。你把它放在一个自定义的数据绑定中,但不是它实际显示HTML的地方。

我更新如下它:

$("#add-to-remedy").click(function() { 
    var htmlToAppend = 
     '<tr><td>' + $('input[type=text].form-control').val() + '</td><td>' + 
     '<div class="rateit" data-rateit-value="' + rateval + 
     '" data-rateit-ispreset="true" data-rateit-readonly="true">' + rateval + '</div>' + '</td></tr>'; 
    $("#remedy-tbl").append(htmlToAppend); 
    newTableRow.appendTo("#remedy-tbl"); 
}); 

从我的角度未知(因为不知道rateit框架)是什么数据rateit价值是应该做的。如果在分配data-rateit值时应该自动填充div,那么我不知道应该使用什么来修复它。也就是说,我相信下面的小提琴能够完成你想要的东西。

http://jsfiddle.net/gZ9by/13/

+0

谢谢你看看劳拉。 Jason做了这个jsfiddle.net/LimitedWard/br85r/2。在那里你可以看到rateit工作。 data-rateit-value是一个从0到5的值,取决于选择了多少星号。 – user3229980

+0

没问题 - 总是很好学习新东西!这是我在这里看待事物的目标之一......帮助他人并向他人学习 –